css - 文本溢出 : ellipsis inside flexible height div inside a div with a limited height

Question

我有一个固定大小的 div，其中包含 float 图像、标题和说明。我的问题是，当向其添加大量文本时，desc div 不会停留在其父级的边界内。我想要的是文本到达 div 底部时被省略号截断。我无法控制 name 和 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/

和工作 fiddle http://jsfiddle.net/z532E/10/