У меня есть блок текста, в котором я хочу сгруппировать слова в пары, чтобы два слова не разбивались. Есть непредвиденное последствие, когда при наличии двух тегов <span></span> подряд вся строка превращается в Nowrap.
Пример: <div><span style="white-space: nowrap;">...</span><span style="white-space: nowrap;">...</span></div>
Код ниже является базовым : результат будет перенесен на любой " " (пробел) или "-", который имеет контейнер.
(ПРИМЕЧАНИЕ: Этот пример предназначен для адаптивной веб-страницы. )
<div class="block-of-text" style="max-width: 550px">
One-two Buckle-my-shoe, Three-four Shut-the-door,
Five-six Pick-up-sticks, Seven-eight Lay-them-straight,
Nine-ten Do-it-again.
</div>
Результат базовой линии будет выглядеть примерно так.
|--------------- My Web Page ---------------| (550px)
| |
| One-two Buckle-my-shoe, Three-four Shut- |
| the-door, Five-six Pick-up-sticks, Seven-|
| eight Lay-them-straight, Nine-ten Do-it- |
| again. |
| |
|-------------------------------------------|
Я хочу убедиться, что любое дефисное слово, окруженное <span class="nowrap">...</span>, остается в одной строке.
Ниже моя попытка. (ПРИМЕЧАНИЕ: у меня есть один-два, не окруженный Nowrap, чтобы показать, как он не будет включен в результат.)
<style>
.nowrap {
white-space: nowrap;
}
</style>
<div class="block-of-text" style="max-width: 550px">
One-two <span class="nowrap">Buckle-my-shoe, </span>
<span class="nowrap">Three-four </span><span class="nowrap">Shut-the-door, </span>
<span class="nowrap">Five-six </span><span class="nowrap">Pick-up-sticks, </span>
<span class="nowrap">Seven-eight </span><span class="nowrap">Lay-them-straight, </span>
<span class="nowrap">Nine-ten </span><span class="nowrap">Do-it-again.</span>
</div>
Мой непреднамеренный результат выглядит примерно так и НЕ является тем, чего я хочу. Теги <span> действуют как один гигант nowrap.
|--------------- My Web Page ---------------| (550px)
| |
| One-two |
| Buckle-my-shoe, Three-four Shut-the-door, Five-six Pick-up-sticks, Seven-eight Lay-them-straight, Nine-ten Do-it-again.
| |
|-------------------------------------------|
То, что я хочу, чтобы произошло :
|--------------- My Web Page ---------------| (550px)
| |
| One-two Buckle-my-shoe, Three-four |
| Shut-the-door, Five-six Pick-up-sticks, |
| Seven-eight Lay-them-straight, Nine-ten |
| Do-it-again. |
| |
|-------------------------------------------|
РЕШЕНИЕ
Спасибо всем и особенно @ Кравимир за помощь в поиске решения:
Работает при добавлении стиля display: inline-block;, при этом все промежутки находятся на одной линии и добавляются интервалы с внутри диапазона.
<style>
.nowrap {
white-space: nowrap;
display: inline-block;
}
</style>
<div class="block-of-text" style="max-width: 550px; border: solid 1px red">
One-two <span class="nowrap">Buckle-my-shoe, </span><span class="nowrap">Three-four </span><span class="nowrap">Shut-the-door, </span><span class="nowrap">Five-six </span><span class="nowrap">Pick-up-sticks, </span><span class="nowrap">Seven-eight </span><span class="nowrap">Lay-them-straight, </span><span class="nowrap">Nine-ten </span><span class="nowrap">Do-it-again.</span>
</div>
Дополнительная информация о решении : Если вы поместите " " (пробел) или за пределы интервала, он не будет работать должным образом или вы получите 2 пробела между интервалами. Также пропуски в конце строки не наблюдаются, когда тег <span> находится на новой строке.
TLDR; Решение было отредактировано выше.