Как получить подстроку меньше/равную размеру div?

Question

[Олег]

Доброго времени. Подскажите, как получить подстроки <= ширине div и обернуть их в span
Вот пример того, что нужно.
https://jsfiddle.net/nk9Lnxn3/1/

Comments

[Kovalsky]

А какая задача?

[Олег]

Никита Полевой: Велосипедная) https://jsfiddle.net/b9qww9cg/

Answer 1

[Владимир]

Готового решения не дам, но дам метод как решал сам.
В канвасе устанавливаю стиль шрифта же как у вашего блока. Располагаю в нем текст, получаю ширину картинки с текстом в одну строку, дальше простая пропорция, с небольшой погрешностью но в ширину блока попадал.

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

Если задача выделить первую строку, то все это совсем не нужно
www.w3schools.com/cssref/sel_firstline.asp
https://jsfiddle.net/3vwLv5n0/

Comments

[Олег]

Да уже понятно. Но велосипед хочу сам сделать https://jsfiddle.net/b9qww9cg/

[GreatRash]

Для того чтобы узнать ширину текста в канвасе есть специальный метод.

[Владимир]

Олег: https://jsfiddle.net/3vwLv5n0/

[Олег]

Владимир: GreatRash: благодарю. В принципе с канвой работает. но опять таки проблема со шрифтами(((( В итоге, если в блоке использовать различные шрифты, косяк получается с вычислениямиМожет еще есть какие идеи хаков к shape caniuse.com/#search=shape

[Владимир]

Олег: Шрифт на канве настраивается, но я непонимаю зачем если есть селектор ::first-line

[Олег]

Владимир: Он ловит только первую строку. А я хочу запилить обтекание в зависимости от свойств border обтекаемого(-мых) элементов.

[Олег]

Владимир: т.е. если строим фигуру из нескольких элементов. Еще идея покапаться с svg, что бы контур отлавливать и от него уже отталкиваться. Есть мнение по svg? Разумно?

[Олег]

Владимир: Идея для себя. Лендинги проще было бы делать. Закинул контур svg и вот тебе уже готовый блок со сложным обтеканием текста и необходимыми стилями.

[GreatRash]

Олег: Можно ещё попробовать помудрить с Selection и Range. не знаю отдают ли они размеры текстовой ноды.

[GreatRash]

Олег: Вот тут народ высоту получить смог.