Как на css сделать полную обводку текста на при переносе на две строки?

Question

[Cheizer]

Друзья, подскажите пожалуйста, как сделать бордер у блока с текстом, ВНИМАНИЕ что бы он был со всех сторон, когда текст в блоке переносится на другую строку?

Вот вариант когда все как нужно


А вот когда хреново


А хочется вот так что бы было


Вот живой пример https://codepen.io/Cheizer/pen/NWWyOxp

Есть какие то варианты как это исправить, что бы бордер обтекал текст при переносе?

Comments

[Ankhena]

Разбивать на span'ы

[Cheizer]

Ankhena, и как? Как узнать что текст сделал перенос строки?

Answer 1

[Cheizer]

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

Стиль такой к блоку с бордером

-webkit-box-decoration-break: clone;
	box-decoration-break: clone;

Не знаю насколько кроссбраузенрно но работает

Вот живой пример
https://codepen.io/rpsthecoder/pen/yjVMLB

Comments

[Ankhena]

Не знаю насколько кроссбраузенрно но работает

https://caniuse.com/#search=box-decoration-break

[Cheizer]

Ankhena, блин, в IE и EDGE не работает совсем :(

Answer 2

[Artem Ivanov]

можно попробовать переносить блок принудительно, тегом br, в случае, если текст не помещается в одну строку
и обертывать каждую строку бордером
если строка помещается в длину, br не отображаем

Comments

[Cheizer]

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

[Artem Ivanov]

Роман Кузнецов, какой юзер?
зная размер шрифта, количество букв и ширину viewport можно предположить, через сколько символов перенос необходим, лучше с небольшим запасом на "широкие" буквы

[Cheizer]

Artem Ivanov, нет, это не решение, овчинка выделки не стоит ради этого столько js кода писать, легче отказаться от оводки. Решение box-decoration-break