我有以下 JSFiddle：http://jsfiddle.net/ofrj55j4/21/ http://jsfiddle.net/ofrj55j4/21/
如何在显示省略号之前在 DIV 中显示尽可能多的文本（现在只显示一行）？
HTML:
<div class="col span_1_of_3" style="height: 120px;">
<div class="test2n" style="height: 100%;">
<div class="main">
<img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
</div>
<div class="sub">
<div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a></div>
<div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
</div>
</div>
</div>
<div class="col span_1_of_3" style="height: 120px;">
<div class="test2n" style="height: 100%;">
<div class="main">
<img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
</div>
<div class="sub">
<div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a></div>
<div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
</div>
</div>
</div>
<div class="col span_1_of_3" style="height: 120px;">
<div class="test2n" style="height: 100%;">
<div class="main">
<img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
</div>
<div class="sub">
<div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a></div>
<div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
</div>
</div>
</div>
目前还没有令人满意的纯 CSS 解决方案。这个 CSS 可以在某些情况下工作：
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
有一些 JS 解决方案可能更有趣，例如Clamp.js https://github.com/josephschmitt/Clamp.js
这里有一个好的article http://css-tricks.com/line-clampin/关于不同的方法和 CodePenexamples http://codepen.io/chriscoyier/pen/iBtep
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
