Можно использовать 'monospace' шрифт, у которого ширина всех символов одинаковая. Тогда можно будет посчитать ширину и указать его в пикселях.
Считаем ширину символа:
Куда-нибудь добавляется тестовый span, внутри которого 100 символов, чтобы увеличить точность измерений. В консоли записываем реальную ширину элемента, разделенную на 100, получаем ширину букв с точностью до ,00
console.log( document.getElementById('test').offsetWidth / 100 );
*{font-size: 16px; font-family: "Lucida Console", Monaco;}
<span id="test">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
Сделал более точный калькулятор → https://jsfiddle.net/OPTlMUS/x5qk608a/ , быстрее можно будет считать)
Когда уже имеется ширина для конкретного шрифта и font-size, умножаем его на 20, и о чудо!)
*{font-size: 16px; font-family: "Lucida Console", Monaco;}
.cuttedText {
display: block;
width: 192.8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<p class="cuttedText">proin sagittis nisl rhoncus mattis rhoncus urna</p>
<p class="cuttedText">С точки зрения банальной эрудиции, каждый индивидуум...</p>
<p class="cuttedText">А на Чебурашкины именины, испекли мы каравай...</p>
Можете поискать и другие шрифты monospace
...
P.s. если нужно именно 20 символов оставить, умножаем на 23, вместо 20.
А если имеется текст разных размеров и везде нужно порезать 20 символов, тут только JS... этот вариант сработает для всех таких элементов, не только для первого (учитывает и пробелы):
(function(){
var cut = document.getElementsByClassName('cuttedText');
for( var i = 0; i < cut.length; i++ ){
cut[i].innerText = cut[i].innerText.slice(0,20) + '...';
}
})();
.font2 {font-size: 24px;}
.font3 {font-size: 36px; font-family: 'Monotype Corsiva';}
<div class="box">
<h2>Lorem ipsum</h2>
<p class="cuttedText">абвгд еёжзи йк лмно прстуф хцчшщ ъыь эюя</p>
<p class="cuttedText font2">абвгд еёжзи йк лмно прстуф хцчшщ ъыь эюя</p>
<p class="cuttedText font3">абвгд еёжзи йк лмно прстуф хцчшщ ъыь эюя</p>
</div>