CSS 在单词换行中覆盖 line-height

在本文中，我们将介绍如何在 CSS 中覆盖 line-height 属性以适应单词换行。

阅读更多：CSS 教程

什么是 line-height 属性？

在 CSS 中，line-height 属性用于设置文本行的高度。它可以指定为一个绝对值（如像素）或一个相对值（如百分比）。默认情况下，行高是根据文字的字体决定的，经常使用像素值进行设置。

line-height 属性对单词换行的影响

在默认情况下，当一个单词太长而需要在行尾被换行时，line-height 属性决定了这一行的高度。当单词被分割成两行时，行高属性会适用于整个单词，导致单词被显示在这两行之间。

让我们看一个例子：

p {
  line-height: 20px;
  width: 100px;
  border: 1px solid black;
}

<p>Thisisaverylongwordthatiswrappedontwolines</p>

上述的代码中，我们设置了一个段落的行高为 20 像素，宽度为 100 像素。段落中包含了一个非常长的单词，它被分割成了两行。然而，由于行高的限制，文本的显示被限制在了两行之间，导致浏览器在行末进行了截断。

如何解决 line-height 影响单词换行的问题？

要解决 line-height 属性在单词换行时的影响，我们可以使用 CSS 的 hyphens 属性。hyphens 属性用于指定浏览器在单词换行时是否允许使用连字符。

让我们看一个示例代码：

p {
  line-height: 20px;
  width: 100px;
  border: 1px solid black;
  hyphens: auto;
}

<p>Thisisaverylongwordthatiswrappedontwolines</p>

在上述的代码中，我们添加了 hyphens 属性并将其值设置为 auto。这将告诉浏览器根据需要在单词内部添加连字符，以使单词能够完整地显示在各自的行中。

使用 hyphens 属性后，我们可以看到文本被正确地换行，而不再受 line-height 属性的影响。

浏览器兼容性

需要注意的是，hyphens 属性在不同浏览器中的兼容性是不一样的。在某些老版本的浏览器中，hyphens 属性可能不被支持。因此，在使用 hyphens 属性时，我们需要谨慎考虑并测试其在所需浏览器上的兼容性。

在 Chrome 和 Safari 中，hyphens 属性被支持，并且默认为 auto。
在 Firefox 中，hyphens 属性被支持，并且默认值为 manual，这意味着需要手动添加连字符。
在 IE 和 Edge 中，hyphens 属性不被支持。

因此，在使用 hyphens 属性时，我们建议你使用 CSS 的浏览器前缀来确保在不同浏览器中的兼容性。

p {
  line-height: 20px;
  width: 100px;
  border: 1px solid black;
  -webkit-hyphens: auto; /* Chrome, Safari */
  -moz-hyphens: auto; /* Firefox */
  -ms-hyphens: auto; /* IE, Edge */
  hyphens: auto;
}

<p>Thisisaverylongwordthatiswrappedontwolines</p>

通过添加浏览器前缀，我们可以确保 hyphens 属性在各个浏览器中正确地工作。