html - 将省略号应用于多行文本

<分区>

是否有解决方案可以在具有流体高度 (20%) 的 div 内的最后一行添加省略号？

我在 CSS 中找到了 -webkit-line-clamp 函数，但在我的例子中，行号将取决于窗口大小。

p {
    width:100%;
    height:20%;
    background:red;
    position:absolute;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>

我有这个 JSFiddle 来说明这个问题。 https://jsfiddle.net/96knodm6/

最佳答案

增加-webkit-line-clamp: 4;增加行数:

p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

<p>Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.</p>

Line clamp 是专有且未记录的 CSS (webkit):https://caniuse.com/#feat=css-line-clamp ，因此它目前仅适用于少数浏览器。

删除了重复的“显示”属性 + 删除了不必要的“文本溢出:省略号”。

关于html - 将省略号应用于多行文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33058004/

上一篇：html - 使用 Bootstrap 类设置字体粗细

下一篇：html - XML、HTML 和 XHTML 文档的有效内容类型

javascript - HTML//jQuery - 重新加载 10 秒后静音所有音频

html - 为什么以百分比表示的图像宽度也会影响图像高度？

html - 当内容转到新行时取消右拉

html - 三行或更多文本的纯 CSS 省略号

javascript - 在 iOS 浏览器上溢出时出现空白

html - CSS Grid 中灵活的网格行高

css - 是否可以使用 CSS 制作模糊的渐变阴影？

overflow - CSS 文本溢出 : ellipsis; not working?

css - 嵌套 flex 盒元素中的文本被截断