CSS文本超出隐藏详解

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文本超出中间省略等多个方面进行了详细的阐述。在项目中，可以根据具体需求选择不同的方法进行应用。