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; }
Вы можете сжать средний контейнер до самого длинного слова, используя: 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%;
ознакомьтесь с этим Обновлено скрипка