[英]How to apply multiline ellipsis without using -webkit-line-clamp
在这里，我在 p 标签中有动态加载的内容。 我想在特定行之后应用文本省略号（例如，如果内容较长，则将文本省略号显示到第 4 行）
p { width: 400px; height: 300px; text-align: justify; } <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Multiline Ellipsis</title> </head> <body> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry, Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. when an unknown printer took a galley of type and scrambled it to make a type specimen book, It has survived not only five centuries, but also the leap into electronic typesetting. remaining essentially unchanged, It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </body> </html>
您可以将 line-height 设置为已知值（例如 1em），并使用该值在所需的行数之后剪切文本（在您的情况下为 4 em）。 之后，您可以使用::after伪元素在纯 CSS 中添加省略号。
p { width: 400px; text-align: justify; position: relative; line-height: 1em; height: 4em; overflow: hidden; } p::after { content: '...'; position: absolute; right: 0; bottom: 0; padding-left: 5px; background: rgb(255, 255, 255); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 100%); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Multiline Ellipsis</title> </head> <body> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry, Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. when an unknown printer took a galley of type and scrambled it to make a type specimen book, It has survived not only five centuries, but also the leap into electronic typesetting. remaining essentially unchanged, It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </body> </html>
确定是否为使用 -webkit-line-clamp 截断的文本显示省略号
[英]Determine if ellipsis is showing for text truncated with -webkit-line-clamp
如何在 css 上的这个 javascript 文本上添加 -webkit-line-clamp？
[英]how to add -webkit-line-clamp on this javascript text on css?
如何在不使用-webkit-transform的情况下在iOS上应用css转换？
[英]How to apply css transform on iOS without using -webkit-transform?
通过多级html标签的多行省略号（钳位），也可以在IE，Firefox等上使用
[英]Multiple Line Ellipsis (clamp) through multi level html tags, which also works on IE, Firefox etc
使用clamp.js在React中进行线夹，导致IE11中出现对象错误
[英]Line clamp in React using clamp.js causing Object error in IE11
如何在ahidden块内使用省略号格式的多行文本进行裁剪？
[英]How to crop with ellipsis formatted multiline text inside of ahidden block?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.