方法一:
(注意:尽量不要设置高度,测试效果不好)
.text_line { width:200px; border: 1px solid black; overflow: hidden; text-overflow: elipsis; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; }
<p class="text_line"> 多行文字超出省略!多行文字超出省略!多行文字超出省略!多行文字超出省略!多行文字超出省略!多行文字超出省略!多行文字超出省略!多行文字超出省略!多行文字超出省略!</p>
方法二:
(通用性能好 js控制)
<style>
.figcaption
{
background: #EEE;
width: 410px;
height: 3em;
margin: 1em;
}
.figcaption p
{
margin: 0;
line-height: 1.5em;
}
</style>
.figcaption
{
background: #EEE;
width: 410px;
height: 3em;
margin: 1em;
}
.figcaption p
{
margin: 0;
line-height: 1.5em;
}
</style>
<div class="figcaption">
<p>
You probably can't do it (currently?) without a fixed-width font like Courier. With
a fixed-width font every letter occupies the same horizontal space, so you could
probably count the letters and multiply the result with the current font size in
ems or exs. Then you would just have to test how many letters fit on one line, and
then break it up.</p>
</div>
<p>
You probably can't do it (currently?) without a fixed-width font like Courier. With
a fixed-width font every letter occupies the same horizontal space, so you could
probably count the letters and multiply the result with the current font size in
ems or exs. Then you would just have to test how many letters fit on one line, and
then break it up.</p>
</div>
$(".figcaption").each(function (i) {
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});