代码之家 › 专栏 › 技术社区 › user3163495

CSS-只在元素之间换行,不换行(不能使用空格)

line-breaks element whitespace css html

1

user3163495 · 技术社区 · 7 年前

假设我有一些 <span> 这样的元素,元素之间没有空格:

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

当在浏览器中呈现,并且水平“挤压”时,我希望文本仅在元素之间换行。因此,只允许前两个示例:

1。反包装:

aaaaaaaaaabbbbbbbbbbcccccccccc

2。仅元件包装:

aaaaaaaaaa
bbbbbbbbbb
cccccccccc

三。字符包装(不允许这样做):

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 回复 | 直到 7 年前

1

2

Mike 7 年前

我想你要找的是 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 元素。

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

2

0

TimeLoad 7 年前

我可能会在这个场景中使用flexbox。下面是一个例子:

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

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

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

编辑:其他答案可能对你的情况更好。flexbox对于组织大量内容非常强大,但是如果您需要一些简单的东西,它可能会过于工程化。