Усечь текст, чтобы он поместился в 3 строки и показать три точки в конце. В HTML

Question

Мне нужно отобразить текст как абзац, но отображать только три строки и обрезать тест при добавлении ... (три точки) в конце абзаца.

Answer 1

Попробуйте следующий CSS свойство:

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

Answer 2

Вычислить максимальную длину строки, которая может поместиться в 3 строки и использовать следующий скрипт

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

Answer 3

я использую ту же логику, чем @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); 
 
alert(res);