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

【问题标题】：CSS - Only wrap text between elements, NOT characters (can't use a space)CSS - 仅在元素之间换行，而不是字符（不能使用空格）
【发布时间】：2019-01-24 03:29:59
【问题描述】：

假设我有几个像这样的<span> 元素，元素之间没有空格：

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

当在浏览器中呈现并被水平“挤压”时，我希望文本仅在元素之间换行。所以，应该只允许前两个例子：

1. ✔ 无包装：

aaaaaaaaaabbbbbbbbbbcccccccccc

2。 ✔ 仅元素包装：

aaaaaaaaaa
bbbbbbbbbb
cccccccccc

3. ❌ 换行（绝对不允许）：

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>

【问题讨论】：

你必须使用跨度吗？可以不使用带有浮动的块元素吗？
@DGS potayto potahto

标签： html css whitespace element line-breaks

【解决方案1】：

我认为您正在寻找的是 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 元素中不允许包裹。

另外，我建议使用更具描述性的类名。这将很快成为一场噩梦。

【讨论】：

有效的是添加“display:inline-block”属性。 “white-space:nowrap”是不必要的，因为元素之间没有空格。
@user3163495 你提到在<span> 中进行包装，所以我假设你可能有一些空白。不过我很高兴你能成功。

【解决方案2】：

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

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

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

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

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

【讨论】：