如何强制 `span` 不在行末换行？

Question

如何强制 `span` 不在行末换行？

cssword-wrap

55

如果一行文字太长，我希望它可以不换行而延伸显示。

- Shamoon

3个回答

64

CSS：

span
{
    white-space:nowrap
}

- AlexC

4

如果你愿意将这些标签变成inline-block，你可以尝试这个方法：

display: inline-block;
width: max-content;

- Stefan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zzzzBov · Accepted Answer

尝试

span
{
  white-space: pre;
}

或者选择自 w3c规范中的其他值：

normal
此值指示用户代理折叠空格序列，并在必要时断行以填充行框。

pre
此值防止用户代理折叠空格序列。只有在保留的换行符处才会断行。

nowrap
此值将空格折叠与“normal”相同，但抑制文本内部的换行。

pre-wrap
此值防止用户代理折叠空格序列。只有在保留的换行符处才会断行，并在必要时断行以填充行框。

pre-line
此值指示用户代理折叠空格序列。只有在保留的换行符处才会断行，并在必要时断行以填充行框。

还需注意，某些选项在IE上的支持有限。

提示：跨浏览器内容混乱：您可以使用 替换行中的所有空格。