Оптимизация длины текста ограниченного пространства

Question

Я показываю текстовые строки разных символов и длину в div фиксированной ширины. Я хотел бы разместить как можно больше текста в выделенном пространстве. Мой текущий подход заключается в ограничении количества текстовых символов следующим образом

var n = //some number 
string = string.substr(0,n); 

Проблема этого подхода заключается в том, что различные символы имеют разную ширину, так в то время как он может ограничить над разливом часто оставляет неиспользуемое пространство. Я попытался предоставить содержащему div следующие свойства css.

Но текст по-прежнему переносится на следующую строку вниз, когда она переполняет ширину. Может ли кто-нибудь помочь мне с хорошей практикой, чтобы решить эту проблему.

Answer 1

Рассчитать фактическую ширину текста, используя метод, описанный здесь: https://coderwall.com/p/kdi8ua.

Затем продолжайте добавлять символы, пока ширина не больше ширины вашего элемента и удаления 1.

Здесь функция с сайта связана с:

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com> 
$.fn.textWidth = function(text, font) { 
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); 
    $.fn.textWidth.fakeEl.html(text || this.val() || this.text()).css('font', font || this.css('font')); 
    return $.fn.textWidth.fakeEl.width(); 
}; 

Answer 2

Вы можете попробовать text-overflow

От quirks mode:

текста overf низкий входит в игру только тогда, когда:

коробка имеет переполнение, отличное от видимого (с переполнением: видимый текст просто вытекает из коробки) В поле есть пустое пространство: nowrap или аналогичный метод ограничения способа текст изложен. (Без этого текст будет обернуть на следующую строку) изменение

Стиль:

div{ 
    width:200px; 
    white-space:nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Working demo