如何用长文本填充DIV，如果溢出则显示省略号 [英] How to fill the DIV with long text and display ellipsis if it overflow

问题描述

我有以下JSFiddle： http://jsfiddle.net/ofrj55j4/21/

I have the following JSFiddle: http://jsfiddle.net/ofrj55j4/21/

在显示省略号（现在只显示一行）之前，我如何在DIV中显示更多文本？

How do I show as much text inside the DIV before showing the ellipsis (right now it is showing only one line)?

HTML：

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可以在某些情况下工作：

At the moment there is no satisfactory pure CSS solution. This CSS could work in some situations:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

有些JS解决方案可能更有趣， Clamp.js

There are some JS solutions which might be more interesting, e.g. Clamp.js

这是一个有关不同方法的文章以及带有示例

这篇关于如何用长文本填充DIV，如果溢出则显示省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！