подсчитайте, сколько символов вписывается в DIV

Question

У меня есть DIV на моей странице (это отзывчивый дизайн), который содержит только текст заданного размера pt. Текст идеально подходит, и страница выглядит великолепно.

Однако, когда размер браузера уменьшен, DIV сжимается, а некоторые из моего текста выходят из DIV.

Есть ли какая-то формула JavaScript (jQuery) для определения того, сколько символов может поместиться в DIV? Идея, которую я имею, - каждый раз, когда браузер меняет размер, текст усекается, а в конце добавляются эллипсы. Я просто не знаю, где его усечь.

Благодаря

Answer 1

Это зависит от того, нужно ли вам поддерживать несколько строк в вашем div, и если вам нужно иметь многоточие (или другое) в конце, И если вам нужно сломать границу слова или нет ,

Для решения одной линии, и несколько линий решения, если вы не хотите, многоточие:

.resizable { 
    overflow-x: hidden; 
} 

Для решения одной линии с многоточием:

.resizable { 
    overflow-x: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Для нескольких решений линии с (что-то) в конце, я не собираюсь публиковать код, но логика идет примерно так: вы завершаете свой div в другом div (называете их внутренним и внешним). Используйте следующий CSS:

.outer{overflow:hidden;} 
.inner{width:100%;} 
.extra{display:none;} 

Затем поймать событие браузера изменения размера, а затем удалить все с классом многоточия $('.ellipsis').remove(); со страницы, и для каждого .extra, взять текст и добавить его к его родителям (.inner) , а затем удалите все дополнительные классы. Затем повторите все внешние классы и сравните его с высотой, если внутренний внутренний класс. Если внутренний div больше внешнего div, тогда вам нужно применить многоточие. Добавьте код эллипса во внутренний div, например $('.inner').append('<span class="ellipsis">...</span><span class="extra"><span>').Затем перейдите в цикл, пока внутренний div не будет равен или меньше высоты внешнего div, сделав следующее: удалите последний (символ | слово) во внутреннем div непосредственно перед .ellipsis и предопределите его до .extra span.

В Интернете есть еще одно решение только для CSS. Если вы не возражаете, что слова могут быть отрезаны посередине, а эллипсис всегда будет отображаться в правом нижнем углу внутреннего div, но вам понадобится Google для этого, это очень долго для repost здесь.

Answer 2

Вы можете исправить это с прямым CSS3, с помощью свойства текста переполнения.

Это похоже на то, что вы хотите, text-overflow: ellipsis;

Answer 3

вы пробовали CSS?

div.resizable { 
    overflow-x: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Расчет потребности в пространстве символа будет производить обширную таблицу необработанных данных. пользовательский агент, семейство шрифтов/размер/вес/разновидность и символ - это размеры, которые необходимо учитывать.

Я не думаю, что будет легко получить данные из контекста live, хотя вложение элемента svg с узлом foreignObject, содержащим html-данные, может быть осуществимым путем: текст может быть скопирован в элемент foreignObject и getBBox method, чтобы обеспечить требуемое пространство.

Предостережение: Последняя идея только что возникла из моего больного разума, я не реализовал такую ​​схему.

Answer 4

Если вам нужно поддерживать старые браузеры, которые не могут обрабатывать text-overflow: ellipsis, тогда я бы предложил плагин, например this one.

Answer 5

Это поможет вам показать отсутствие. строк, которые вы хотите показать.

Код

.text {

переполнения: скрытый;

text-overflow: многоточие;

дисплей: -webkit-box;

-webkit-line-clamp: 2;/* количество строк для отображения */

-webkit-box-orient: vertical;

}