Как сделать правильное обтекание у блока в котором есть текстовый блок с переносом?

Question

[RomanSS]

Есть текстовые блоки, в которых нужно закрашивать фон. Проблема заключается в том, что когда в блоке переносится текст (на картинке слева 3 пункт), ширина блока становится на всю ширину родительского блока. Как сделать так, чтобы фон закрашивался только на ширину контента, на картинке справа 3 пункт, как должно быть. Текст может быть разный, поэтому жесткие переносы использоваться нельзя, фоном будет картинка (поэтому тенями не получится) ну и без js.

Текущий код: https://codepen.io/anon/pen/mzpVPr

Comments

[RomanSS]

кто перенес вопрос на "простой", попробуйте решить его :)

Answer 1

[Владимир Проскурин]

Если вы поиграете с font-size у .item, то поймете, почему так случилось.
UPD: не очень красивое решение
вот так ровнее

Comments

[Ankhena]

Либо можно добавить еще побольше текста.

[RomanSS]

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

[Владимир Проскурин]

Ankhena, или для любителей
word-break: break-all


:D

[RomanSS]

я не любитель таких переносов, а вы? ))) максимум что можно break-word

[Владимир Проскурин]

RomanSS, я имел ввиду, что покрутив font-size, вы заметите, что это место было выделено для слова, которое совсем чуть не влезло. Так работают переносы.

[Ankhena]

RomanSS, да причем тут дизайн? Вам же нужно разобраться почему так происходит.
Для этого нужно изменить шрифт или количество текста и/или длину слов или (если вы любитель, по совету выше), то word-break.

[RomanSS]

Владимир Проскурин, спасибо за отклик, но если бы это знание позволило мне найти решение, то вопрос был бы уже закрыт, а так для чего мне это?

[RomanSS]

Ankhena, мне нужно найти решение, которое резиновое, а не заточенное под конкретные текстовые предложения.

[Владимир Проскурин]

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

[RomanSS]

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

[Владимир Проскурин]

RomanSS, тогда беды нет. Меняете концепцию и бегом. Если решение найдете, оно наверняка окажется багованным, не работающим нормально на других браузерах/устройствах.

[Ankhena]

RomanSS, считайте на JS.
В простой перенесла я, потому что это стандартное поведение текстовых/инлайновых блоков и вопрос повторяется раз в неделю.
Например, на базе этого: Как разбить текст на строки JS? выясняете самую длинную строку, берете ее ширину и задаете для div.

[Владимир Проскурин]

RomanSS, или если адаптивности не важна, то можно просто поставить br

[RomanSS]

Ankhena, Владимир Проскурин в любом случае спасибо вам за отклик. Но к сожалению, я ищу именно то решение, которое описано в вопросе, без js, без жестких переносов, без уменьшения ширины (если это влияет на другие блоки). Почему я вопрос сразу поставил в разряд сложных, потому что все ваши варианты на поверхности лежат и легко решаемы для статичного контента.
Есть ли такое решение под мою задачу, я не знаю, я пол дня провозился и не смог найти, поэтому обратился сюда, может кто сталкивался с подобным.

[Ankhena]

RomanSS,

я ищу именно то решение, которое описано в вопросе, без js, без жестких переносов, без уменьшения ширины (если это влияет на другие блоки).

Нет, такого решения нету. Автоматом все будет себя вести так как сейчас.
Ближайшее решение на CSS это расстановка переносов, чтобы длинный текст всегда доставал до правого края блока.

[Владимир Проскурин]

RomanSS, держите. Обновил ответ.

[Владимир Проскурин]

Ankhena, мне кажется, вам будет интересно взглянуть на это чудовище франкенштейна


я не уверен, что это будет работать на всех браузерах.

[RomanSS]

Владимир Проскурин, добавил текста в 3 блок и уже не работает) https://jsfiddle.net/sjbgy9nw/

[RomanSS]

Ankhena, "нет такого решения", "невозможно" я не знаю как вы, но такие утверждения очень слабые, я лично со своим опытом верстки (он поверьте не такой маленький) и тем более после 10 минут на раздумье побоялся бы так утверждать.

[Владимир Проскурин]

RomanSS, а, ну там кейс был с широкой строчки в узкую, а тут наоборот.

и тем более после 10 минут на раздумье побоялся бы так утверждать.

Как раз таки опыт и подсказывает, что такое можно решить только костылями, такими как я прислал выше.

[Владимир Проскурин]

RomanSS, во, вот так вообще супер

[RomanSS]

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

[RomanSS]

Владимир Проскурин, плюс еще минус этого решения в том, что даже если оно заработает, вы уже условия задачи меняете, где я написал, что фоном будет картинка, а в примере для простоты я поставил фон цветом. Я могу вам сделать ваше решение легче используя просто тени, гуглится за 1 минуту, но я писал что тенями нельзя так как будет вместо цвета фоновая картинка. Не говоря уже о том, что Ankhena говорит, что способа нет, хотя оно есть, но оно мне не подходит из-за того что будет использоваться фоновая картинка, а не цвет.

[Владимир Проскурин]

RomanSS,

Я могу вам сделать ваше решение легче используя просто тени, гуглится за 1 минуту

Ссылку

где я написал, что фоном будет картинка

Тогда я говорю - никак. Только через JS или переносы.

[Ankhena]

RomanSS, давайте ваше решение в рамках условий. Я же только рада буду.

[RomanSS]

Владимир Проскурин, например multi-line-padded-text. Ну и на основе этого пример реализации моего случая тенями https://codepen.io/anon/pen/EdQjvy
Ankhena если вдруг найду, то обязательно напишу.

[Владимир Проскурин]

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

Если решение найдете, оно наверняка окажется багованным, не работающим нормально на других браузерах/устройствах.

Вот что мы имеем на Firefox последней версии

[Ankhena]

RomanSS, ну да, это то самое известное решение с тенями, оно прекрасное, но только до тех пор пока дело не дойдет до адаптации или изменении шрифта пользователем.

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

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

Answer 2

[Павел Грузных]

так?

Comments

[RomanSS]

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

[Мария Коробкоголовых]

то есть задать max-width: 80%; вместо 300px не вариант?

[RomanSS]

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