CSS 超出部分和文本超出部分在 fieldset 中的应用

在本文中，我们将介绍在 HTML 的 fieldset 元素中如何使用 CSS 的 overflow 属性和 text-overflow 属性来调整文本超出部分的样式。

阅读更多：CSS 教程

CSS Overflow 属性

CSS 的 overflow 属性用于控制当元素内的内容超出其指定尺寸时的处理方式。overflow 属性有以下可选值：

visible：默认值。内容超出时不进行裁剪，会显示在元素外部。
hidden：超出内容将被裁剪，并且不显示。
scroll：添加滚动条以便于查看被裁剪的内容。
auto：根据需要自动选择显示滚动条。
inherit：从父元素继承 overflow 属性的值。

下面是一个示例，其中两个 fieldset 元素使用了不同的 overflow 属性值：

<!DOCTYPE html>
<html>
<head>
  <style>
    #fieldset1 {
      width: 200px;
      height: 150px;
      overflow: hidden;
    }

    #fieldset2 {
      width: 200px;
      height: 150px;
      overflow: scroll;
    }
  </style>
</head>
<body>

  <fieldset id="fieldset1">
    <legend>Overflow: hidden</legend>
    <p>这是一个很长很长的段落，会超出 fieldset 指定的尺寸。如果没有设置 overflow 属性为 hidden，那么超出的部分会显示出来。</p>
  </fieldset>

  <fieldset id="fieldset2">
    <legend>Overflow: scroll</legend>
    <p>这是另一个很长很长的段落，会超出 fieldset 指定的尺寸。但是设置了 overflow 属性为 scroll，所以会显示滚动条。</p>
  </fieldset>

</body>
</html>

上面的代码中，第一个 fieldset 元素中的内容超出了指定的尺寸，但由于设置了 overflow: hidden，超出的部分被裁剪，不会显示出来。而第二个 fieldset 元素中的内容也超出了指定的尺寸，但由于设置了 overflow: scroll，所以会显示滚动条，方便用户查看超出部分的内容。

CSS Text-overflow 属性

CSS 的 text-overflow 属性用于控制当文本超出容器时的显示方式。text-overflow 属性有以下可选值：

clip：默认值。裁剪超出的文本并隐藏被裁剪的部分。
ellipsis：在被裁剪的文本末尾显示省略号。
string：自定义被裁剪的文本末尾显示的内容。

下面是一个示例，其中的 fieldset 元素使用了 text-overflow 属性来调整文本被裁剪时的样式：

<!DOCTYPE html>
<html>
<head>
  <style>
    #fieldset1 {
      width: 200px;
      height: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: clip;
    }

    #fieldset2 {
      width: 200px;
      height: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    #fieldset3 {
      width: 200px;
      height: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: string;
    }
  </style>
</head>
<body>

  <fieldset id="fieldset1">
    <legend>Text-overflow: clip</legend>
    <p>这是一个很长很长的句子，会超出 fieldset 指定的尺寸。如果没有设置 text-overflow 属性，超出的部分会被隐藏。</p>
  </fieldset>

  <fieldset id="fieldset2">
    <legend>Text-overflow: ellipsis</legend>
    <p>这是一个很长很长的句子，会超出 fieldset 指定的尺寸。设置了 text-overflow: ellipsis，超出的部分会显示省略号。</p>
  </fieldset>

  <fieldset id="fieldset3">
    <legend>Text-overflow: string</legend>
    <p>这是一个很长很长的句子，会超出 fieldset 指定的尺寸。设置了 text-overflow: string，超出的部分会显示自定义的内容。</p>
  </fieldset>

</body>
</html>

上面的代码中，第一个 fieldset 元素中的文本超出了指定的尺寸，但由于设置了 text-overflow: clip，超出的部分被裁剪，被裁剪的部分被隐藏。第二个 fieldset 元素中的文本也超出了指定的尺寸，但由于设置了 text-overflow: ellipsis，所以显示省略号，提示用户有被裁剪的文本。最后一个 fieldset 元素中的文本同样超出了指定的尺寸，但由于设置了 text-overflow: string，所以显示了自定义的内容。

总结

在本文中，我们介绍了在 HTML 的 fieldset 元素中如何使用 CSS 的 overflow 属性和 text-overflow 属性来调整超出部分和文本超出部分的样式。通过设置不同的属性值，我们可以裁剪超出的内容，显示滚动条，或者显示省略号或自定义的内容。掌握这些属性的使用，可以为我们的页面设计带来更好的效果和用户体验。