CSS

Question

假设我有几个这样的 <span> 元素，元素之间没有 spaces:

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

在浏览器中呈现时，并且水平显示 "squished"，我希望文本仅在元素之间换行。因此，只允许使用前两个示例：

1. ✔ 无换行：

aaaaaaaaaabbbbbbbbbbcccccccccc

2。 ✔ 仅元素换行：

aaaaaaaaaa
bbbbbbbbbb
cccccccccc

3。 ❌ 字符换行（一定不能这样）：

aaaaaaaa
aabbbbbb
bbbbcccc
cccccc

如何防止字符在 CSS 中换行？通常我会在元素之间放置一个 space 以使它们正确换行，但在这种特定情况下我不能使用 space。我尝试了以下方法，但字符仍然用这个包裹（至少在 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>

Answer 1

在这种情况下我可能会使用 flexbox。这是一个例子：

.flex {
  display: flex;
  flex-direction: column;
}

<span class="flex">
  <span>aaaaaaaaaa</span>
  <span>bbbbbbbbbb</span>
  <span>cccccccccc</span>
</span>

Flexbox 非常适合像这样组织页面上的元素，我强烈建议进一步研究它。

编辑：其他答案可能更适合您的情况。 Flexbox 在组织大量内容方面非常强大，但如果您需要简单的东西，它可能会过度设计。

Answer 2

我想你要找的是 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 元素内不允许换行。

附带说明一下，我建议使用更具描述性的 class 名称。这将很快成为维护的噩梦。

CSS - 仅在元素之间换行，而不是字符（不能使用 space）

CSS - Only wrap text between elements, NOT characters (can't use a space)

html

whitespace

element

line-breaks