Question

我有一个固定大小的div，其中包含浮动图像，标题和描述。我的问题是，当添加大量文本时， desc div不会保留在其父级的边界内。我想要的是当文本到达div的底部时，文本被省略号截断。我无法控制名称和 desc div中内容的长度，因此我无法对它们施加高度。这看起来非常微不足道，但我无法弄清楚我哪里出错了。 JSFiddle

为了清楚起见，我的意思是我希望我的结果看起来像这样：

{{name}}
{{desc.}} Lorem ipsum dolor
sit amet, consectetur adipisi
cing elit, sed do eiusmod tem
por incididunt ut labore et...

编辑：事实证明，这个问题比我预期的要多得多。这个问题与div边界无关，而是多行省略号结尾不是一件容易的事情。

HTML

<div id="data" class="clearfix">
 <img id="icon" src="{{imgurl}}">
 <div id="text">
    <div id="name">{{name}}</div>
    <div id="desc">{{desc}}</div>
 </div>
</div>

CSS

#data {
 background-color:red;
 width:300px;
 position: absolute;
 margin: 23px 44px;
 height: 100px;
 padding: 10px 10px;
 color: #fff;
 text-overflow: ellipsis;
}
#icon {
 background-color: grey;
 width: 80px;
 height: 80px;
 float: left;
 margin-right: 10px;
}
#text {
 float: right;
 width: 200px;
 height: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
}
#name {
 font-size: 18px;
 font-weight: bold;
 line-height: 1.5em;
}
#desc {
 font-size: 13px;
 line-height: 1.1em;
 text-overflow: ellipsis;
}

Live Example on JSFiddle

Answer 1

使用省略号时需要添加空格和溢出

white-space: nowrap;
overflow: hidden;

我发现这篇文章记录了这个...... http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

和工作小提琴http://jsfiddle.net/z532E/10/

Answer 2

这是一个很好的解决方案，您可以在codepen上找到多行省略号的问题： Pure CSS multiline text with ellipsis

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
 }

文本溢出：在高度有限的div内的灵活高度div内的省略号

2 个答案: