Как сделать ширину блока равную тексту в несколько строк + центрировать?

Question

[fred55rus]

У меня есть родительский элемент, ограниченный определённым размером. Внутри него находится строчный элемент, который может содержать в себе 2 длинных слова, занимающие две строчки. Возможно ли сделать, чтобы строчный элемент центрировался и как бы обтекал эти два слова, а не растягивался на всю ширину?
Пример: https://jsfiddle.net/4uf1pnja/
Я экспериментировал со свойством display: table-caption, оно обтекает переносимый текст, но никак не хочет выравниваться по центру: https://jsfiddle.net/4uf1pnja/1/

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/4uf1pnja/2/

Comments

[fred55rus]

Не годится, блок с текстом должен выглядеть как в моём примере.

[Сергей delphinpro]

fred55rus, не понял, в каком примере, и ЧТО вам тогда нужно?

[Сергей delphinpro]

fred55rus, может лучше скрин дизайна приложить

[fred55rus]

Сергей, ввиде синего блока, как здесь: https://jsfiddle.net/4uf1pnja/1/ только центрированного.

[Сергей delphinpro]

fred55rus, вот так что ли? https://jsfiddle.net/4uf1pnja/3/

[fred55rus]

Сергей, нет, вот так это должно выглядеть https://jsfiddle.net/4uf1pnja/5/ только центрирование должно быть автоматическим, так как я не знаю заранее размер текста.

[Сергей delphinpro]

fred55rus, https://jsfiddle.net/4uf1pnja/6/ ?

[Сергей delphinpro]

fred55rus, https://jsfiddle.net/4uf1pnja/7/

[fred55rus]

Сергей, да ну неееет, там просто два длинных слова из базы берутся, они могут быть какими угодно, и тега <br> в них, естественно, нету. Это можно в js устроить, но я-то задал вопрос по css и хочу ответа средствами css.

[Сергей delphinpro]

fred55rus, вы не сделаете эту хрень на css.
1. javascript (пример выше)
2. ничего сложно нет в том, чтобы при выводе данных на бекэнде привести их к нужному виду для отображения. По условию слова два. Значит всего-то заменить один пробел на тег br.

[fred55rus]

Сергей, особенность в том, что размер моего родительского блока может измениться при определённых условиях, а текст, если влазит, должен снова выстроиться в одну строчку. Также из базы могут взяться более короткие слова, которые сразу могут уместиться в одну строку. Мне таким образом придётся подставлять костыли под каждую ситуацию, чего я совсем не желаю. Наверняка есть решение на css.

[Сергей delphinpro]

Наверняка есть решение на css.

Продолжайте надеяться...
=))

[one_day]

white-space: pre-line;

[Сергей delphinpro]

one_day, =) чем это отличается от вставки br?

[fred55rus]

one_day, это куда и к какой ситуации?

[one_day]

Сергей, обходимся без жс)

[Сергей delphinpro]

one_day, как? перевод строки-то всё равно нужно вставлять https://jsfiddle.net/4uf1pnja/8/

[Сергей delphinpro]

вот так https://jsfiddle.net/4uf1pnja/9/

[one_day]

Сергей, касякнул, Вы правы)

[Сергей delphinpro]

fred55rus, Держите https://jsfiddle.net/4uf1pnja/10/

[Сергей delphinpro]

Но всё равно не универсально. Не подходит под все ваши уточнения по задаче.

[fred55rus]

Сергей, клёвая фишка с табличной вёрсткой, возьму на заметку. Но мне ещё надо, чтобы текст и в одну строку мог расправляться, если влазит в родительский блок. Я не думал, что придётся такие хаки выстраивать, потому и не уточнил все детали прям в вопросе.

[Сергей delphinpro]

fred55rus, я и говорю — не универсально.
Верстаю 8-9 лет уже. Поверьте с такими кейсами сталкивался. И серебряной пули нет.

Answer 2

[fred55rus]

В итоге использовал для себя такой вариант: https://jsfiddle.net/4uf1pnja/11/
Просто к табличной вёрстке Сергея подставил min-width, чтобы строчный элемент мог развернутся, если влазит в заданные размеры. Не идеально, но вроде как это лучшее решение моей проблемы средствами css.