如何避免在CSS中出现文本换行

Question

4

我正在建设一个新的网站，CSS会强制让h2标签内的文本在空格处换行。这里是网站：点击查看。问题如下图所示：

。如果我将“Low Fees”连在一起且没有空格，甚至加上几个字符（“LowFeesABC”），它将保持在一起并不会换行。我不太懂CSS，不知道如何让文本保持在一起，有什么建议吗？

- HerrimanCoder

2

我不禁把这篇帖子看作是一则广告。如果它是合法的，那我很抱歉。 - Scrimothy

3

不是广告，而是一个CSS问题。 :-| - HerrimanCoder

@SweatCoder - 请将所有相关的HTML和JS直接放入您的问题中。这样，在您解决问题后，代码就会存在，并且这个问题将对其他人有用。 - KatieK

可能这是一个问题，但它也是一则广告！因此得分为-1。 - Andy Brown

2个回答

4

这是因为该元素设置了固定宽度，并且文本“LOW FEES”无法适应该宽度而导致换行。只需删除width:90px即可消除换行。

- Jukka K. Korpela

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

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

- Matt Ball · Accepted Answer

48

#topPanel h2 {
    white-space: nowrap;
}

- Matt Ball

只要小心，因为不是所有的浏览器都以相同的方式呈现。而且，不是所有用户都有字体。如果您的网站被翻译，那么不同语言的等效字符串长度也不同。精确地设置间距可能会很危险。请指定一个宽度，并相应地使用 overflow 或 text-overflow 属性。 - Jon Newmuis

@JonathanNewmuis 我不是很明白。除了说“不要在文本中允许换行”之外，CSS 中并没有太多“确切”的东西。 - Matt Ball

3

抱歉，为了澄清，Matt的回答是完全正确的（+1）。然而，基于多种因素（如上所述），如果您强制使文本不换行，文本很可能会超出您希望它保持在内的框内（我猜这不是您想要的行为）。 - Jon Newmuis