CSS超出部分省略号的用法详解

一、CSS超出部分省略号显示文字

CSS超出部分省略号可以非常方便地让文字在超出宽度的时候变成省略号，从而提高页面显示的美观性，同时也提高了用户体验。

一般来说，我们可以通过以下代码来实现文字超出部分省略号的效果：

.text {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

代码解析：

• display: -webkit-box; 属性让文字按照行排列，而不是按照块排列。
• overflow: hidden; 隐藏超出部分。
• text-overflow: ellipsis; 超出部分显示省略号。
• -webkit-box-orient: vertical; 让文字垂直排列。
• -webkit-line-clamp: 2; 限制行数为2，即显示2行文字。

二、CSS超出部分省略号悬浮提示

如果在CSS超出部分省略号的基础上，加上悬浮提示效果，可以让用户更好地了解文本的全部内容。

我们可以使用以下代码来实现这一效果：

.text {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    word-wrap: break-word;
    cursor: pointer;
}
.text:hover {
    white-space: normal;
    word-wrap: break-word;
}

代码解析：

• white-space: normal; 允许文本自动换行。
• word-wrap: break-word; 当单词长度超过容器的时，自动换行。
• cursor: pointer; 鼠标变成指针样式。
• .text:hover 悬浮时展示全部文本。

三、CSS超出显示省略号

CSS超出显示省略号是另一种实现CSS超出部分省略号的方法，其实现代码如下所示：

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

代码解析：

• width: 200px; 指定元素的宽度值。
• white-space: nowrap; 禁止换行。
• overflow: hidden; 隐藏超出部分。
• text-overflow: ellipsis; 超出部分显示省略号。

四、CSS文字超出显示省略号

除了元素宽度超出之外，也可以使用CSS对文本的宽度进行限制，并超出时显示省略号。

我们可以使用以下代码来实现这一效果：

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

代码解析：

• width: 200px; 指定元素文本的宽度值。
• overflow: hidden; 隐藏超出部分。
• text-overflow: ellipsis; 超出部分显示省略号。
• white-space: nowrap; 禁止换行。

五、CSS超出省略号后面加东西

在CSS超出部分省略号的基础上，我们可以在省略号后面加上其他元素，以便提供更多的信息。

以下是一个实现方法：

.text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.text:after {
    content: '...';
    color: red;
    font-weight: bold;
}

代码解析：

• display: inline-block; 元素变成内联块状元素，以便占据父级元素中的可用空间。
• overflow: hidden; 隐藏超出部分。
• text-overflow: ellipsis; 超出部分显示省略号。
• white-space: nowrap; 禁止换行。
• max-width: 200px; 文本最大宽度不超过200px。
• .text:after 添加的元素表示在省略号后面添加的元素。
• content: '...'; 表示添加的内容为省略号。
• color: red; 设置省略号的颜色为红色。
• font-weight: bold; 设置省略号的字体为粗体。

六、CSS超出部分显示省略号

除了使用省略号代替文本，还可以使用其他符号，比如中文省略号和英文省略号。

以下是一个实现方法：

.text {
   text-overflow: clip;
   white-space: nowrap;
   overflow: hidden;
}
.text:after {
   content: "...";
}

代码解析：

• text-overflow: clip; 隐藏超出部分。
• white-space: nowrap; 禁止换行。
• overflow: hidden; 超出部分隐藏。
• .text:after 添加的元素表示在省略号后面添加的元素。
• content: '...'; 表示添加的内容为中文省略号。

七、CSS超出字数省略号

CSS超出字数省略号可以以字数为基础自动截取文本，并把超出的部分用省略号表示。

以下是一个实现方法：

.text {
   display: block;
   overflow : hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 200px;
}

代码解析：

• display: block; 元素变成块状元素，以便占据父级元素中的可用空间。
• overflow : hidden; 隐藏超出部分。
• text-overflow: ellipsis; 超出部分显示省略号。
• white-space: nowrap; 禁止换行。
• max-width: 200px; 文本最大宽度不超过200px。

八、CSS文本超出省略号

CSS文本超出省略号与CSS超出部分省略号类似，但是它是基于词而不是基于行的，也就是说，可以给单词文本添加省略号。

以下是一个实现方法：

.text {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 200px;
   -ms-text-overflow: ellipsis;
}

代码解析：

• display: block; 元素变成块状元素，以便占据父级元素中的可用空间。
• overflow: hidden; 隐藏超出部分。
• text-overflow: ellipsis; 超出部分显示省略号。
• white-space: nowrap; 禁止换行。
• width: 200px; 元素的宽度不超过200px。
• -ms-text-overflow: ellipsis; 兼容IE浏览器。

九、CSS文字超出隐藏变省略号

文本超出部分省略号的另一种实现是，隐藏超出的部分，以词为基础添加省略号。

以下是一个实现方法：

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
    display: inline-block;
    vertical-align: top;
}

.text::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1em;
    margin-left: -0.5em;
    text-indent: -999em;
    vertical-align: top;
}

代码解析：

• overflow: hidden; 隐藏超出部分。
• text-overflow: ellipsis; 超出部分显示省略号。
• white-space: nowrap; 禁止换行。
• width: 200px; 元素的宽度不超过200px。
• display: inline-block; 元素变成内联块状元素，以便占据父级元素中的可用空间。
• vertical-align: top; 把元素的顶部与行内框的顶部对齐。
• .text::after 隐藏部分添加省略号，是添加的后面元素。
• content: ""; 表示添加的内容为空字符串。
• display: inline-block; 元素变成内联块状元素，以便占据父级元素中的可用空间。
• width: 0.5em; 元素宽度为0.5个em。
• height: 1em; 元素高度为1个em。
• margin-left: -0.5em; 左边距为-0.5个em。
• text-indent: -999em; 设定文本缩进，即把文本缩进超过元素宽度的距离。
• vertical-align: top; 把元素的顶部与行内框的顶部对齐。