CSS 如何让

<

legend>文本换行

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

<

legend>标签的文本换行。

阅读更多：CSS 教程

什么是

<

legend>标签？
在HTML中，

<

legend>标签用于定义

<

fieldset>元素的标题或说明文本。它通常位于

<

fieldset>标签的开头，并帮助用户更好地理解和使用表单。

<

legend>标签的默认行为
默认情况下，

<

legend>标签中的文本不会自动换行，而会在一行上水平展示。这可能导致文本溢出容器边界，并使其显示不全。

使用CSS进行文本换行

为了让

<

legend>标签中的文本换行，我们可以使用CSS属性来控制标签的显示方式。

1. 使用white-space属性

我们可以使用white-space属性来控制文本的换行方式。white-space属性用于指定元素内的空白如何处理。

legend {
  white-space: normal;
}

设置white-space属性值为normal，可以使文本根据容器的宽度自动换行。这样

<

legend>标签中的文本就能够在适当的位置断行并显示完整。

2. 使用word-wrap属性

我们还可以使用word-wrap属性来控制文本的换行方式。word-wrap属性用于指定是否允许word-break断字和/或overflow-wrap换行。这在处理较长的文本时非常有用，因为它能够防止文本溢出容器边界。

legend {
  word-wrap: break-word;
}

设置word-wrap属性值为break-word，可以使文本根据容器的宽度自动换行，并在必要时断字，确保文本不会溢出。

3. 结合使用white-space和word-wrap属性

如果需要更好地控制文本的换行方式，我们可以结合使用white-space和word-wrap属性。

legend {
  white-space: normal;
  word-wrap: break-word;
}

通过将white-space属性值设为normal，使文本在适当的位置换行；并将word-wrap属性值设为break-word，确保文本不会溢出。

示例

让我们通过一个示例来演示如何使用CSS使

<

legend>标签中的文本换行。

<fieldset>
  <legend>This is a long legend that needs wrapping</legend>
  <input type="text" placeholder="Fill in the form field">
</fieldset>

在没有使用CSS进行样式设置时，

<

legend>标签中的文本在一行上展示，可能会导致显示不全。接下来我们使用上述提到的CSS属性来进行样式设置。

legend {
  white-space: normal;
  word-wrap: break-word;
}

通过将white-space属性设置为normal，word-wrap属性设置为break-word，

<

legend>标签中的文本就能够根据容器的宽度自动换行，并且在必要时断字。

总结

在本文中，我们介绍了如何使用CSS让HTML中的

<

legend>标签中的文本换行。通过设置white-space属性为normal和word-wrap属性为break-word，我们可以控制文本在适当的位置换行，并确保文本不会溢出显示不全。使用这些CSS属性，我们可以更好地优化表单中的

<

legend>标签，使用户能够更好地理解和使用表单。