是否可以使用CSS将文本长度限制为“n”行(或在垂直溢出时剪切)。
文本溢出:省略号;仅适用于1行文本。
原文:
Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus、vel ut aliquet、elementum nunc乌尔纳修女院!坐下!图比斯岛莫斯·廷西杜特!Dapibus sed aenean、magna sagitis、lorem velit
所需输出(2行):
Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus,velut aliquet,elementum。。。
如果你想专注于每一封信,你可以这样做,我提到这个问题
函数truncate(源,大小){返回源.length>size?source.sslice(0,大小-1)+“…”:源;}var text=truncate('truncate text to fit in 3 lines',14);console.log(文本);
如果你想专注于每个单词,你可以这样做+空格
consttruncate=(title,limit=14)=>{//14是默认参数常量newTitle=[];if(title.length>limit){title.split(“”).reduce((acc,cur)=>{如果(acc+cur.length<=极限){newTitle.push(cur);}返回acc+cur.length;}, 0);return newTitle.join(“”)+“…”}返回标题;}var text=truncate('truncate text to fit in 3 lines',14);console.log(文本);
如果你想专注于每个单词,你可以这样做+没有空格
consttruncate=(title,limit=14)=>{//14是默认参数常量newTitle=[];if(title.length>limit){Array.prototype.slice.call(title).reduce((acc,cur)=>{如果(acc+cur.length<=极限){newTitle.push(cur);}返回acc+cur.length;}, 0);return newTitle.join(“”)+“…”}返回标题;}var text=truncate('truncate text to fit in 3 lines',14);console.log(文本);
我真的很喜欢线夹,但还不支持firefox。。所以我做了一个数学计算,然后隐藏溢出
.body-content.body-overflow-hidden h5 {
max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
overflow: hidden;
}
.body-content h5 {
font-size: 14px; /* need to know this*/
line-height:1,1; /*and this*/
}
现在让我们假设你想通过jQuery删除并添加这个类,你需要有一个额外的像素,所以它的最大高度是63像素,这是因为你需要每次检查高度是否大于62像素,但是在4行的情况下,你会得到一个假真,所以额外的像素可以解决这个问题,不会产生任何额外的问题
我将为此粘贴一个coffee脚本,作为一个示例,它使用了默认隐藏的两个链接,类读得更多,读得更少,它将删除溢出不需要的链接,并删除主体溢出类
jQuery ->
$('.read-more').each ->
if $(this).parent().find("h5").height() < 63
$(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
$(this).remove()
else
$(this).show()
$('.read-more').click (event) ->
event.preventDefault()
$(this).parent().removeClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-less').show()
$('.read-less').click (event) ->
event.preventDefault()
$(this).parent().addClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-more').show()