我有以下 JSFiddle: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>
最佳答案
你可以模拟它。
演示 http://jsfiddle.net/ofrj55j4/24/
.sr {
position: relative; /* add this to .sr */
}
.sr:after {
display: block;
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
content: "...";
background: inherit; /* so the background is the same as the container */
}
这个想法是在应该出现省略号的多行容器的边缘上覆盖省略号或 ...
。它不是真正的省略号,但其目的足够好,并且与旧版浏览器兼容。
关于html - 如何用长文本填充DIV并在溢出时显示省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26344520/