CSS - Обтекание текста только между элементами, а не символами (нельзя использовать пробел) - PullRequest
Новая
       27

CSS - Обтекание текста только между элементами, а не символами (нельзя использовать пробел)

0 голосов
/ 24 января 2019

Допустим, у меня есть несколько <span> элементов, подобных этому, без пробелов между элементами: 

<span>aaaaaaaaaa</span><span>bbbbbbbbbb</span><span>cccccccccc</span>

При рендеринге в браузере и горизонтальном "сжатии" мне бы хотелось, чтобыТекст для переноса ТОЛЬКО между элементами.Таким образом, допускаются только первые два примера:

1.✔ Без упаковки: 

aaaaaaaaaabbbbbbbbbbcccccccccc

2.Wra Упаковка только для элемента: 

aaaaaaaaaa
bbbbbbbbbb
cccccccccc

3.Wra Перенос символов (это не должно быть разрешено): 

aaaaaaaa
aabbbbbb
bbbbcccc
cccccc

Как запретить перенос символов в CSS?Обычно я помещаю пробел между элементами, чтобы они правильно обернулись, но я не могу использовать пробелы в этом конкретном случае.Я пробовал следующее, но символы по-прежнему переносятся этим (по крайней мере, в Firefox): 

<style>
.b{
word-break:break-all;
}
.n{
word-break:normal;
}
</style>

<span class="b"><span class="n">aaaaaaaaaa</span><span class="n">bbbbbbbbbb</span><span class="n">cccccccccc</span></span>

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Я думаю, что вы ищете white-space: nowrap (что предотвратит перенос внутри одного элемента .n) в сочетании с display: inline-block (который будет отображать элементы как встроенные элементы уровня блока): 

.n {
  white-space: nowrap;
  display: inline-block;
}  
<span class="b">
  <span class="n">aaaaaaaaaa</span><span class="n">bbbbbbbbbb</span><span class="n">cccccccccc</span>
</span>

Это будет отображать элементы рядом друг с другом, если есть место, или оборачивать их, если места недостаточно, однако в пределах одного.n element.

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

0 голосов
/ 24 января 2019

Я бы, вероятно, использовал flexbox в этом сценарии.Вот пример: 

.flex {
  display: flex;
  flex-direction: column;
}
<span class="flex">
  <span>aaaaaaaaaa</span>
  <span>bbbbbbbbbb</span>
  <span>cccccccccc</span>
</span>

Flexbox отлично подходит для организации элементов на странице, как это, я настоятельно рекомендую изучить его дальше.

РЕДАКТИРОВАТЬ: Другие ответы могут бытьлучше для вашей ситуации.Flexbox действительно эффективен для организации большого количества контента, но он может быть слишком сложным, если вам нужно что-то простое.

...