CSS文本超出隐藏在网页布局中应用广泛。它可以用来美化界面，以及带来更好的用户体验。在本文中，我们将从多个方面进行详细阐述，包括CSS超出隐藏、CSS文本超出2行显示省略号、CSS文本超出省略号、CSS文本超出换行、CSS文字超出隐藏变省略号、CSS图片超出部分隐藏、CSS文本超出用省略号代替、CSS超出部分隐藏、CSS文本超出省略、CSS文本超出中间省略等方面展开。
一、CSS超出隐藏
CSS超出隐藏可以使用text-overflow属性实现。这个属性指定当文本溢出包含元素时发生的事情。默认情况下，任何溢出都不会发生再现。这意味着无论文本溢出多少，浏览器都会显示所有文本。但是，可以使用以下几个值来定义text-overflow属性：
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
1、ellipsis
使用ellipsis值会将超出部分按照省略号“…”隐藏起来。但是，为了使该值正常工作，必须在元素的样式定义中包含white-space:nowrap;和overflow:hidden;这两个属性。
2、clip
clip值将超出部分切除，使其在边界内不可见。该值仅适用于单行文本（如果有溢出）。
3、string
string值将超出的文本字符串only截断。这意味着，超出部分完全被丢弃，不会使用省略号或剪切而隐藏。
二、CSS文本超出2行显示省略号
CSS文本超出2行显示省略号可以使用-webkit-line-clamp实现。可以使用一个CSS属性-webkit-line-clamp，它可以让块元素（如div）只显示特定数量的文本行：
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
上述代码会让“.text”这个元素只显示两行文本。任意超过该行数的文本都将被省略，并用省略号表示。
三、CSS文本超出省略号
CSS文本超出省略号，可以使用CSS的伪元素before和after结合white-space属性来实现。
.text {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text:before {
content: "...";
position: absolute;
left: -25px;
}
上述代码会在文本超出时，给文本前面添加一个省略号。在这里，伪元素before中的属性content会在文本前面插入一个省略号（...）。 另外，width属性指定了文本区域宽度，并使用white-space:nowrap属性禁止文本换行，overflow:hidden属性防止文本溢出，text-overflow:ellipsis属性确保用省略号截断超出的文本。
四、CSS文本超出换行
CSS文本超出换行，可以使用break-word和word-wrap属性实现,这里我们取word-wrap。
.text {
width: 200px;
word-wrap: break-word;
}
上述代码将在文本超出时，自动将其断行。word-wrap属性主要用于指定如果文本太长不适合容器宽度怎么处理。如果将其设置为break-word，则可以在中间断开单词以使文本适合容器宽度。否则，超出部分将挤压到容器以外，而不会自动换行。
五、CSS文字超出隐藏变省略号
CSS文字超出隐藏变省略号，可以使用text-overflow、white-space和overflow属性来实现。
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
上述代码可以让文本超出时用省略号替换隐藏。
六、CSS图片超出部分隐藏
CSS图片超出部分隐藏，可以使用overflow属性实现。
.img {
width: 200px;
height: 200px;
overflow: hidden;
background: url(example.jpg) center center no-repeat;
}
上述代码会使用overflow:hidden隐藏掉多余的图片部分。同时，使用background属性将图片的路径和位置设置为居中和不重复。
七、CSS文本超出用省略号代替
CSS文本超出用省略号代替，可以使用text-overflow、white-space和overflow属性来实现。
.text {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
上述代码可以让文本超出时用省略号替换隐藏。
八、CSS超出部分隐藏
CSS超出部分隐藏可以通过一些属性来实现。下面我们来举一个例子。
首先，HTML代码如下：
<div class="text"> <p>This is a long text might exceed the parent element</p> </div>
接着我们可以使用如下CSS样式来进行设置。
.text {
width: 200px;
height: 30px;
overflow: hidden;
}
.text p {
margin: 0;
position: relative;
top: -10px;
}
上述代码中，我们设置text类别元素的宽度为200px，高度为30px，超出的部分使用overflow:hidden隐藏起来。在其中，“This is a long text might exceed the parent element”这段话超出了设定的高度。为了让其能被显示出来，我们使用了一个p标签，通过设置其position属性为relative，top为-10px，将文本向上移动，从而显示出超出部分。
九、CSS文本超出中间省略
CSS文本超出中间省略可以通过CSS的text-indent、::before、::after、white-space、text-overflow和overflow属性来实现。我们来看下面的例子。
首先，HTML代码如下：
<div class="text"> <p>This is a long text might exceed the parent element</p> </div>
接下来，使用如下CSS样式来进行设置：
.text {
position: relative;
width: 200px;
height: 30px;
overflow: hidden;
white-space: nowrap;
}
.text::before,
.text::after {
content: "...";
position: absolute;
top: 0;
}
.text::before {
left: 0;
width: 25%;
text-align: right;
}
.text::after {
right: 0;
width: 25%;
}
.text p {
margin: 0;
text-indent: -9999px;
}
上述代码中，我们首先设置text类别元素的宽度为200px，高度为30px，超出的部分使用overflow:hidden隐藏起来。在其中，“This is a long text might exceed the parent element”这段话超出了设定的高度。为了使匹配的CSS生效，我们为元素使用了position: relative属性，以使得.text::before和.text::after的position:absolute定位相对于text元素。
在上述代码中，我们使用了::before和::after伪元素，在不同的位置插入了省略号。使用 position和z-index属性将这些元素合理的显示起来。
因文本溢出而导致的显示问题，我们将文本缩进到-9999px，这样这段文本就会被隐藏。
总结
本文从CSS超出隐藏、CSS文本超出2行显示省略号、CSS文本超出省略号、CSS文本超出换行、CSS文字超出隐藏变省略号、CSS图片超出部分隐藏、CSS文本超出用省略号代替、CSS超出部分隐藏、CSS文本超出省略、CSS文本超出中间省略等多个方面进行了详细的阐述。在项目中，可以根据具体需求选择不同的方法进行应用。
