文本溢出 CSS

在某些情况下，文本可能会溢出其容器，这可能会破坏网页的布局。CSS提供了解决这个问题的多种方式。

1. 文本缩略

用CSS的text-overflow属性，在文本溢出容器时显示省略号。text-overflow属性可以与white-space和overflow属性一起使用。

h1 {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这将在h1元素的宽度为200px时控制文本溢出，省略号将被添加到文本的末尾。

2. 换行

再文本溢出容器时，可以使用CSS的word-wrap属性来强制换行。

h1 {
  width: 200px;
  word-wrap: break-word;
}

这会使文本在h1元素的宽度为200px时强制换行，而不会破坏网页的布局。

3. 隐藏文本

可以使用CSS的overflow属性来隐藏文本，当溢出容器时。可以使用overflow:hidden来隐藏溢出部分的内容。

h1 {
  width: 200px;
  overflow: hidden;
}

这将在h1元素的宽度为200px时隐藏溢出的文本。

以上三种方式可以结合使用，以获得最佳的解决方案。

以上是文本溢出的CSS技巧，可以帮助你修复布局问题，为用户提供更好的体验。