Question

如下所示和https://jsfiddle.net/a6b37kx6/1/我有一个<p>，已被分为<span>。它是日语，文本中没有空格。我不希望在一个范围内发生换行，所以我在CSS中使用.word {white-space:nowrap;}。（P标签上的宽度和边框只是为了节省您必须调整浏览器大小以查看问题;在实际应用中，段落宽度将是自动的。）

这在Firefox中可以正常工作：

但在Chrome中使用white-space:nowrap表示它显示为一条长行。这是一个Chrome错误，即使是，也有解决方法吗？

<html>
<head>
<style>
html {font-size:20px;}
p {width:10rem;border:1px solid black;}
.word {white-space:nowrap;}
</style>
</head>
<body>
<p>
<span class="word">営業</span><span class="word">利益</span><span class="word">予想</span><span class="word">を</span><span class="word">８０億円</span><span class="word">から</span><span class="word">５０億円</span><span class="word">に</span><span class="word">減額</span><span class="word">修正</span><span class="word">する</span><span class="word">。</span>
</p>
</body>
</html>

Answer 1

我不确定这是否是Chrome中的错误或其他导致chrome表现如此的错误。

但是，默认情况下，<span>是inline元素。只需将其设为inline-block，问题就会解决。

.word {
  display: inline-block;
  vertical-align: top;
}

html {font-size:20px;}
p {width:10rem;border:1px solid black;}
.word {
  white-space:nowrap;
  display: inline-block;
  vertical-align: top;
}

<p>
  <span class="word">営業</span><span class="word">利益</span><span class="word">予想</span><span class="word">を</span><span class="word">８０億円</span><span class="word">から</span><span class="word">５０億円</span><span class="word">に</span><span class="word">減額</span><span class="word">修正</span><span class="word">する</span><span class="word">。</span>
</p>

如何在Chrome中使用跨度不换行，但段落仍然换行？

1 个答案: