如何設(shè)置CSS以隱藏超出部分

在CSS中，您可以使用“text-overflow”屬性來隱藏超出部分的文本，該屬性指定了當(dāng)文本溢出其包含的元素時(shí)應(yīng)該發(fā)生的情況。

“text-overflow”屬性可以有以下值：

“clip”此值將文本剪切到容器的邊緣，即超出部分的文本將被隱藏，并且不顯示省略號。

“ellipsis”此值將在文本超出容器時(shí)添加省略號，以指示文本被隱藏。

“string”此值將自定義字符串作為溢出文本的表示，可以任意設(shè)置。

如果您有一個(gè)寬度為200px的div元素，并且您希望其中的文本在超出時(shí)能夠隱藏，您可以這樣設(shè)置：

div {
  width: 200px;
  text-overflow: clip;
  white-space: nowrap; /* 防止文本換行 */
}

在這個(gè)例子中，當(dāng)div元素中的文本超出200px時(shí)，文本將被隱藏，并且不顯示省略號，如果您希望顯示省略號，可以將“text-overflow”屬性的值更改為“ellipsis”。

為了使“text-overflow”屬性正常工作，您還需要將“white-space”屬性設(shè)置為“nowrap”，以防止文本在容器中換行，如果文本在容器中換行，text-overflow”屬性將不會生效。