一、基础使用
用CSS设置文本省略号，一般情况下只需要添加如下代码即可：
/* 单行省略号 */
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
/* 多行省略号 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
代码注释中的第一段是单行省略号的常用设置，主要通过overflow:hidden; 和 white-space:nowrap; 来设置文本的隐藏和不换行，再加上text-overflow:ellipsis; 来显示省略号。而第二段是多行省略号的常用设置，主要通过display: -webkit-box; 和 -webkit-line-clamp: 2; 来控制文本显示的行数，并加上overflow: hidden; 来隐藏省略的多余文本内容。
二、样式设置
上述使用方法中提到的样式效果相对简单，只有一种省略号样式，并且只能设置具体的行数。实际情况中，我们需要更多种类的省略号样式，比如：多行省略号中省略号位置的调整、省略号和文本间距的控制等等。下面是一些常用的技巧，通过巧妙地CSS设置，可以实现更多样式效果。
1. 调整多行省略号中省略号的位置
默认情况下，多行省略号中省略号的位置是居中的，想要调整位置需要使用一些技巧，下面是一种方法：
.clamp {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: 1.2; /* 行高 */
max-height: 3.6em; /* 最大高度 = 行高 x 行数 */
font-size: 16px;
}
/* 使用伪元素，实现省略号位置的调整 */
.clamp::after {
content: "...";
position: absolute;
right: 0; /* 距离父元素右侧 */
bottom: 0; /* 距离父元素底部 */
padding-left: 30px; /* 省略号和文本间距，根据实际情况调整 */
}
上述代码中，.clamp 是包含文本内容的父元素，通过设置max-height 和 line-height 控制文本显示的行数和行高。其中line-height * 行数 = max-height。在伪元素::after中，使用position:absolute; 将省略号定位到父元素右下角，通过调整padding-left 控制省略号与文本的间距，从而实现省略号位置的调整。
2. 调整省略号和文本的间距
我们经常需要调整省略号与文本的间距，让布局更加美观。这里提供两种方法：
/* 方法一：使用 text-indent */
.clamp {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: 1.2; /* 行高 */
max-height: 3.6em; /* 最大高度 = 行高 x 行数 */
font-size: 16px;
text-indent: 1em; /* 省略号和文本间隔，根据实际情况调整 */
}
/* 方法二：使用 margin-right */
.clamp {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: 1.2; /* 行高 */
max-height: 3.6em; /* 最大高度 = 行高 x 行数 */
font-size: 16px;
}
/* 设置省略号与文本间隔 */
.clamp::after {
content: "...";
float: right; /* 省略号靠右显示 */
margin-right: 5px; /* 省略号和文本间隔，根据实际情况调整 */
}
方法一中，使用text-indent 设置文本缩进的大小，从而达到控制省略号和文本间距的效果。在方法二中，使用CSS浮动来将省略号靠右显示，再通过margin-right 属性来控制省略号和文本间的距离。
三、总结
通过本文的介绍，相信读者们可以掌握常见的CSS超出两行及多行省略号的样式设置方法。除了基础使用外，更多样式设置需要结合实际情况进行探索，灵活应用CSS技巧，才能实现更加美观实用的效果。
