广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

CSS的超出显示指的是当某个元素的内容超出了其指定的宽度或高度时，如何处理溢出的内容。在这种情况下，我们可以使用CSS提供的一些属性和值来控制超出的内容的显示和隐藏，并使其在页面中看起来更加美观和可读。

CSS overflow属性

当元素的内容超出了其指定的宽度或高度时，我们可以使用CSS中的overflow属性来控制溢出的内容如何显示。overflow属性有以下几个值：

例如，如果我们想要在一个固定高度的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有以下三个值：

例如，如果我们想在一行中显示一个长标题，当标题文本超出元素宽度时，我们可以使用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属性有以下两个值：

例如，如果我们想在一个有限的宽度中显示一些长文本，还要确保所有单词在边界处换行，并且所有超出的内容都被裁剪掉，可以使用以下CSS：

<p style="width: 200px; word-wrap: normal; overflow: hidden; text-overflow: ellipsis;">这是一段很长很长很长的文本。它包含了很多单词，但都会在边界处换行，不会被截断。</p>

结论

在设计网页时，我们通常需要让内容尽可能地适应不同屏幕大小和分辨率。为了确保超出的内容能够正确地在页面上显示，我们可以使用CSS中提供的一些属性和值，如overflow、text-overflow和word-wrap，它们可以在页面布局方面提供帮助，并使页面看起来更加清晰和整齐。

以上就是css 超出显示的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~