截斷文本以適合 3 行並在 Html 中顯示三個點

Question

我需要將文本顯示為段落，但只顯示三行並在段落末尾添加 ...（三個點）時截斷測試。

Answer 1

計算可以放入 3 行的字符串的最大長度並使用以下腳本

var maxLength = 140;
var result = yourString.substring(0, maxLength) + '...';

Answer 2

我使用與@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);

Answer 3

 .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>

Answer 4

嘗試以下 css 屬性：

.your-class-name {
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}