HTML

当文本超出宽度时，换行显示

在本文中，我们将介绍如何在HTML中使用

元素来处理当文本内容超出指定宽度时的换行显示问题。通过适当的CSS样式设置，我们可以让长文本内容自动换行，并保持在指定区域内显示。

阅读更多：HTML 教程

使用CSS设置文本自动换行

在HTML中，

元素用于定义段落内容。当文本内容超出所给宽度时，我们可以使用CSS属性来控制文本的换行显示。以下是一些常用的CSS属性：

word-wrap: break-word：当文本中的单词超出指定宽度时，将其拆分到新行。这样可以避免单词被截断，保证整个单词完整显示。

示例代码：

<p style="width: 200px; word-wrap: break-word;">
    This is a long paragraph which exceeds the specified width. Without the word-wrap property, the text would be cut off or overflow outside the specified area. However, with the word-wrap property set to break-word, the long word "exceeds" will be split into two lines to ensure the complete display of the text.
</p>

使用CSS设置文本截断显示

除了自动换行外，我们还可以通过设置CSS属性使文本在超出指定宽度后截断显示。以下是常用的CSS属性：

overflow: hidden：将超出宽度的文本内容隐藏起来，不显示在指定区域外。
text-overflow: ellipsis：在截断的文本末尾添加省略号(…)来暗示被截断的部分。

示例代码：

<p style="width: 200px; overflow: hidden; text-overflow: ellipsis;">
    This is a long paragraph which exceeds the specified width. Without the overflow and text-overflow properties, the text would overflow outside the specified area. However, with these properties set, the text will be truncated and marked with ellipsis at the end.
</p>

使用CSS设置文本换行与截断的优先级

当同时设置了自动换行和截断显示的CSS属性时，哪个属性会生效呢？根据CSS的规则，overflow和text-overflow属性的优先级高于word-wrap属性。因此，如果同时使用了这些属性，文本将被截断显示，而不是自动换行。

示例代码：

<p style="width: 200px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;">
    This is a long paragraph which exceeds the specified width. With the combination of both word-wrap and overflow properties, the text will be truncated and marked with ellipsis at the end, instead of splitting into new lines.
</p>

总结

通过使用CSS属性，我们可以在HTML中有效地处理文本内容超出宽度时的换行显示问题。通过设置word-wrap属性实现自动换行，通过设置overflow和text-overflow属性实现文本截断显示，并且我们可以根据具体需求来决定使用哪种方式。合理地使用这些属性，可以提升网页的可读性和用户体验。