是否可以使用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(文本);

其他回答

以下CSS类将文本限制为两行,并插入省略号以指示溢出的文本。

.two-line-ellipsis {
  overflow: hidden;
  width: 325px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

目前不能,但将来可以使用文本溢出:ellipis lastline。目前,它可以在中使用供应商前缀Opera 10.60+:示例

对于使用内联样式的反应者:

<p
style={{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    lineClamp: 2,
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
}}
>Some Text</p>

您可以执行以下操作:

.max行{显示:块;/*或内联块*/文本溢出:省略号;换行:换行;溢出:隐藏;最大高度:3.6em;线高:1.8em;}<p class=“max lines”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Nunc vitae leo dapibus,accumsan lorem eleifend,pharetra quam。Quisque前庭commodo justo,eleifend mollis enim blandit eu。Aenean hendrerit nisl et elit maximus finibus公司。Suspendis scelerisque consectetur nisl mollis sceleriske</p>

其中,最大高度:=线高度:×<线数>(单位:em)。

我真的很喜欢线夹,但还不支持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()