[分享]css三个点依次循环的区别

在CSS中，我们经常会用到“三个点”的概念，也就是“ellipsis”，来表示“省略号”。在实际应用中，我们可能会遇到三种不同的展示方式，即点号依次循环显示、点号显示在中间、点号显示在结尾。那么这三个...

在CSS中，我们经常会用到“三个点”的概念，也就是“ellipsis”，来表示“省略号”。在实际应用中，我们可能会遇到三种不同的展示方式，即点号依次循环显示、点号显示在中间、点号显示在结尾。那么这三个展示方式有什么区别呢？
首先，我们先看一下点号依次循环显示的情况：

p{
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
} 

这种情况下，当文本内容超出p标签的宽度时，点号会依次循环显示出来，直到达到预设的长度为止。这种情况下，点号的长度是不固定的，是根据文本与p标签的宽度而变化的。这种展示方式，通常用于列表或表格中，可以让用户更好地了解内容的情况。
接下来看一下点号显示在中间的情况：

p{
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
::before {
  content:'...';
  display:inline-block;
  width:20px;
  text-align:right;
}
::after {
  content:'...';
  display:inline-block;
  width:20px;
  text-align:left;
} 

这种情况下，点号会显示在文本的中间位置，看起来更加美观。我们需要通过伪元素:before和:after来实现点号的添加。这种展示方式，通常用于强调文本的关键内容。
最后，我们看一下点号显示在结尾的情况：

p{
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
} 

这种情况下，点号会显示在文本的结尾位置，是最常见的展示方式。当文本内容超出p标签的宽度时，会使用点号代替超出的文字。这种展示方式，通常用于说明文本内容的长度限制，比如评论文本框等场景中。
以上就是三种点号的展示方式的区别了。在具体应用时，我们需要根据具体情况来选择使用哪种展示方式，以达到更好的效果。