CSS Flex-box - поле Trim, содержащее длинный текст

Я играю с системой flexbox в CSS, и я не могу понять, как решить мою проблему.

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

Это то, что у меня есть сейчас:

И это то, что я хочу иметь:

Я искал готовое решение в google (и stackoverflow), но без везения. Я также подготовил JSFiddle для этого: http://jsfiddle.net/f98VN/4/

Можно ли делать то, что я хочу, и если да, то как я могу это достичь? Если нет, каковы ваши предложения?

код:

HTML

<div>
 
 <div>text is here</div>
 
</div>

CSS

.flex-parent {
 display: flex;
 justify-content: center;
 width: 550px; /* it has width of the whole page, in fiddle I changed it to fixed */
 align-items: center;
}
.item1 {
 background: red;
 height: 100px; /* it has constant width */
 width: 100px;
}
.item2 { /* it width is fluid, depends on text inside which is modified by JS */
 background: pink;
 font-size: 100px;
}
3 ответа

Вы можете сжать средний контейнер до самого длинного слова, используя: display:table;width:1%; DEMO или использовать inline-block и inline-table, отбрасывая flexmodel: DEMO (это он)

Чтобы сохранить слова вместе, вы можете использовать не нарушающий символ   между словами, которые вы хотите оставить в стороне на одной строке: DEMO

Изменить: Над demos работает в некоторых браузерах. В Chrome и Opera содержимое перемещается в сторону страницы. Фиксированная версия: http://codepen.io/gc-nomade/pen/izKFG


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

Вы можете увидеть это, установив текст div в word-break: break-all; http://jsfiddle.net/f98VN/10/

Это не тот эффект, который вы просили, но, по крайней мере, он не оставляет лишнего места.


Я получил его так, как вы хотите, используя проценты, не фиксированные ширины пикселей,

changed width: 550px; to width:70%;

ознакомьтесь с этим Обновлено скрипка

licensed under cc by-sa 3.0 with attribution.