[英]Truncate text to fit in 3 lines and show three dots in end In Html
我需要将文本显示为段落,但只显示三行并在段落末尾添加 ...(三个点)时截断测试。
计算可以放入 3 行的字符串的最大长度并使用以下脚本
var maxLength = 140;
var result = yourString.substring(0, maxLength) + '...';
我使用与@zavg 相同的逻辑,并进行了一些改进:
…
字符。 function truncate(source, size) { return source.length > size ? source.slice(0, size - 1) + "…" : source; } var res = truncate('Truncate text to fit in 3 lines', 14); console.log(res);
.class-name { display: block; white-space: nowrap; width: 15em; overflow: hidden; text-overflow: ellipsis; }
<div style="height: 15vh; padding: 10px; background:#dee0e5"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry</span> </div> <div style="height: 15vh;padding: 10px; margin-top:5px; background:#aff8af"> <span class="class-name">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry</span> </div>
尝试以下 css 属性:
.your-class-name {
text-overflow: ellipsis;
-webkit-line-clamp: 3;
line-clamp: 3;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.