CSS的超出显示指的是当某个元素的内容超出了其指定的宽度或高度时，如何处理溢出的内容。在这种情况下，我们可以使用CSS提供的一些属性和值来控制超出的内容的显示和隐藏，并使其在页面中看起来更加美观和可读。
CSS overflow属性
当元素的内容超出了其指定的宽度或高度时，我们可以使用CSS中的overflow属性来控制溢出的内容如何显示。overflow属性有以下几个值：
- visible：超出的内容将被显示在元素外部，并且可能会遮盖其他元素。
- hidden：超出的内容将被裁剪掉，不显示在页面上。
- scroll：如果内容溢出，则会显示一个滚动条以便用户可以滚动查看。
- auto：如果内容溢出，则会显示一个滚动条，否则内容将正常显示。
例如，如果我们想要在一个固定高度的div中显示一些内容，当内容超出div的高度时，我们可以设置overflow属性为scroll或hidden。
<div style="height: 200px; overflow: scroll;">
<p>一些很长很长的内容</p>
</div>
在这个例子中，当p元素的内容超出200px高度时，将会显示一个垂直滚动条，使用户可以滚动查看内容。
CSS text-overflow属性
除了使用overflow属性来控制超出内容的显示方式外，我们还可以使用CSS中的text-overflow属性来控制文本内容超出时的显示方式。text-overflow属性只有在white-space属性设置为nowrap时才会生效。
text-overflow有以下三个值：
- clip：文本超出时将被裁剪掉，不显示在页面上。
- ellipsis：文本超出时将显示省略号。
- string：超出文本的部分将显示指定的字符串。
例如，如果我们想在一行中显示一个长标题，当标题文本超出元素宽度时，我们可以使用text-overflow属性和white-space属性。
<h1 style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">这是一个很长很长很长的标题</h1>
在这个例子中，当标题文本超出元素的宽度时，将会显示省略号，使用户了解文本被截断了。
CSS word-wrap属性
除了使用overflow和text-overflow属性来控制元素内容的溢出和截断外，我们还可以使用CSS中的word-wrap属性来控制文本单词的换行。
默认情况下，当一个单词超出元素宽度时，它将被截断并显示在下一行。但如果我们想确保单词不被截断，并在单词边界处换行，我们可以使用word-wrap属性。
word-wrap属性有以下两个值：
- normal：单词在边界处断行，不会被截断。
- break-word：单词将在任何可用的地方断行，当单词太长时将被截断。
例如，如果我们想在一个有限的宽度中显示一些长文本，还要确保所有单词在边界处换行，并且所有超出的内容都被裁剪掉，可以使用以下CSS：
<p style="width: 200px; word-wrap: normal; overflow: hidden; text-overflow: ellipsis;">这是一段很长很长很长的文本。它包含了很多单词，但都会在边界处换行，不会被截断。</p>
结论
在设计网页时，我们通常需要让内容尽可能地适应不同屏幕大小和分辨率。为了确保超出的内容能够正确地在页面上显示，我们可以使用CSS中提供的一些属性和值，如overflow、text-overflow和word-wrap，它们可以在页面布局方面提供帮助，并使页面看起来更加清晰和整齐。