带省略号的动态大小文本 [英] Dynamic sized text with ellipsis

问题描述

我在一个固定大小的容器中有一个标题和描述文本，我想在同一行。

两者都有动态宽度。

我想要描述（一般来说更长）在溢出容器时显示省略号。

这是什么我到目前为止：小提琴。

< h2> markup

 < div> 
< span class =header>一些动态宽度标题< / span> 
< span class =desc>一些动态宽度描述 - 当时间足够长时，应以省略号结束< / span> 
< / div> 
  

css

  div 
 {
 width：400px; 
 max-width：400px; 
 height：25px; 
 line-height：25px; 
 border-bottom：2px solid＃952262; 
颜色：＃111; 
} 
 .header 
 {
 font-weight：bold; 
 float：left; 
} 
 .desc 
 {
 overflow：hidden; 
 text-overflow：ellipsis; 
 white-space：nowrap; 
 display：inline-block; 
 width：100％; 
} 
  

任何想法？

我需要 display：block 在.desc类上

FIDDLE

css

  div 
 {
 width：400px; 
 max-width：400px; 
 height：25px; 
 line-height：25px; 
 border-bottom：2px solid＃952262; 
 color：＃111; 
} 
 .header 
 {
 font-weight：bold; 
 float：left; 
} 
 .desc 
 {
 overflow：hidden; 
 text-overflow：ellipsis; 
 white-space：nowrap; 
 display：block; 
} 
  

I have a header and description text within a fixed-size container which I want on the same line.

Both have dynamic width.

I want the description (which is generally a lot longer) to appear with an ellipsis when it overflows the container.

This is what I have so far: fiddle.

markup

<div>
    <span class="header">Some dynamic-width header</span>
    <span class="desc">Some dynamic-width description which - when long enough - should end with a ellipsis</span>
</div>

css

div
{
    width: 400px;
    max-width: 400px;
    height: 25px;
    line-height: 25px;
    border-bottom: 2px solid #952262;
    color: #111;
}
.header
{
    font-weight: bold;
    float:left;
}
.desc
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block; 
    width: 100%;
}

Any ideas?

解决方案

Just figured it out.

I needed display:block on the .desc class

FIDDLE

css

div
{
    width: 400px;
    max-width: 400px;
    height: 25px;
    line-height: 25px;
    border-bottom: 2px solid #952262;
    color: #111;
}
.header
{
    font-weight: bold;
    float:left;
}
.desc
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; 
}

这篇关于带省略号的动态大小文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！