将文本截断为三行，并在末尾显示三个点

Truncate text to fit in 3 lines and show three dots in end In Html

本文关键字：三个 显示 三行 文本      更新时间：2023-09-26

我需要将文本显示为段落，但只显示三行，并在添加时截断测试。。。（三个点）在段落末尾。

计算可以容纳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;
}
相关文章：