Это похоже на Как заставить два элемента всегда оставаться на одной строке в
Примере
<th>
{dynamic text}
<i>{static icon}</i>
</th>
При наличии достаточного места мы получим:
dynamic text here{icon}
Если места недостаточно, он будет обернут:
dynamic text
here{icon}
Но он никогда не должен помещать {icon} в свою собственную строку, например:
some text
here
{icon}
Я хотел бы, чтобы статический значок прикреплялся к последнему слову динамического текста.
2
10 Авг 2015 в 23:34
2 ответа
Вы должны использовать nowrap. Вот документы. nowrap позволяет удерживать несколько слов на одной строке без торможения.
Взгляните на этот codepen.
CSS:
.nowrap {
white-space: nowrap;
}
HTML:
Some <span class="nowrap">text with</span> extra text.
1
11 Авг 2015 в 00:49
1
Я бездельничал, пытаясь заставить nowrap работать для моих нужд. В вашем примере «текст с» остается на одной строке. Я бы хотел, чтобы «дополнительный текст» оставался на той же строке, что и «с» (когда это отдельные элементы).
–
11 Авг 2015 в 01:09
Почему бы вам не использовать с дополнительным текстом? Не вижу проблемы, если честно...
–
11 Авг 2015 в 01:13
Это разные элементы. У меня есть «текстовый текстовый текст » и я хотел бы, чтобы придерживался последнего слова текста, но не других. Более того, эти поля являются динамическими, поэтому я не могу сделать "text text text ", потому что я не знаю, сколько текста там будет. Я думаю, что мне может понадобиться разобрать это с помощью javascript перед его отображением, а затем использовать nowrap.
–
11 Авг 2015 в 01:22
Не могли бы вы обновить свой вопрос, указав фактический html, и добавить несколько реалистичных вариантов использования, пожалуйста? Это действительно сбивает с толку..
–
11 Авг 2015 в 01:24
Я думаю, что set display: inline лучше, учтите, что он просит придерживаться последнего слова, а не всей строки, и его можно обернуть.
0
16 Окт 2018 в 21:59