CSS word-break 在 Microsoft Edge 中不能正确工作

在本文中，我们将介绍在 Microsoft Edge 中 CSS word-break 属性不能正确工作的问题，并提供一些解决方案和示例代码。

阅读更多：CSS 教程

问题描述

CSS word-break 属性用于指定文本在换行时的断词行为。然而，在某些情况下，这个属性在 Microsoft Edge 浏览器中不能按预期工作。具体来说，当使用中文字符或其他非拉丁字符（如日文或韩文）时，word-break 属性可能无法正确断开词语，导致文本溢出或错位的问题。

解决方案

为了解决 CSS word-break 在 Microsoft Edge 中的问题，我们可以采用以下两种方法：

1. 使用 word-wrap 属性

word-wrap 属性也可以用于控制文本在换行时的断词行为。与 word-break 不同的是，word-wrap 属性可以在不影响文字排版的情况下强制文字换行。因此，通过将 word-wrap 设置为 break-word，可以强制 Microsoft Edge 正确断开词语。

示例代码如下所示：

p {
  word-wrap: break-word;
}

2. 使用非标准的 -ms-word-break 属性

除了标准的 word-break 属性外，Microsoft Edge 还实现了一个非标准的 -ms-word-break 属性，用于解决中文字符或其他非拉丁字符的断词问题。通过将 -ms-word-break 设置为 break-all，可以强制 Microsoft Edge 正确断开词语。

示例代码如下所示：

p {
  -ms-word-break: break-all;
}

示例

为了更好地理解 CSS word-break 在 Microsoft Edge 中的问题和解决方案，以下是一些示例：

示例 1：word-wrap 属性

<div style="width: 200px; border: 1px solid #000;">
  <p style="word-wrap: break-word;">
    这是一段很长很长的中文文本，用于测试 word-wrap 属性在 Microsoft Edge 中的效果。
  </p>
</div>

在 Microsoft Edge 中，这段文本将正确断开并换行，不会导致溢出或错位。

示例 2：-ms-word-break 属性

<div style="width: 200px; border: 1px solid #000;">
  <p style="-ms-word-break: break-all;">
    这是一段很长很长的中文文本，用于测试 -ms-word-break 属性在 Microsoft Edge 中的效果。
  </p>
</div>

与示例 1 类似，在 Microsoft Edge 中，这段文本也将正确断开并换行，不会导致溢出或错位。

总结

在本文中，我们介绍了 CSS word-break 属性在 Microsoft Edge 中不能正确工作的问题，并提供了两种解决方案：使用 word-wrap 属性和使用非标准的 -ms-word-break 属性。通过对这些解决方案的示例代码的实际应用，我们可以在 Microsoft Edge 中正确断开词语并避免文本溢出或错位的问题。希望本文对解决 CSS word-break 在 Microsoft Edge 中的问题有所帮助。