Chrome显示错误与文本包装

Chrome Display Bug with text wrapping

本文关键字：文本 包装 错误 显示 Chrome      更新时间：2023-09-26

我的主导航中的链接"我们做什么"没有完整显示，单词"DO"被截断。如果您在检查器中将单词"DO"更改为其他内容，例如"WHAT WE ELEPHANT"，它将按原样完整显示。某些其他组合也被切断，例如，如果你尝试"我们采购什么"等

该网站使用Bootstrap。我不确定这是否与这个问题有关，但我仍在留白。

"What We Do"似乎正在将"Do"包装到下一行。

我成功地将white-space:nowrap;添加到<li>s:内的链接中

.main-nav a {
  ...
  white-space: nowrap;
}

编辑：

参见Chris Laarman的回答中提到的关于text-transform的问题：
文本转换：大写导致Chrome 上的布局错误

下面的代码似乎修复了问题

.main-nav a {
  white-space: nowrap;
}

如果关闭文本转换，您可以看到它在一行中显示所有单词。因此，文本转换似乎是在计算宽度之后进行的。还不确定确切的原因，但它似乎只是把它推到了的边缘

下面的链接似乎描述了同样的问题：

文本转换：大写导致Chrome 上的布局错误

相关文章：