CSS实现限制字数功能当对象内文本溢出时显示省略标记

实现限制字数并且在对象内文本溢出时显示省略标记，可以使用CSS中的text-overflow和white-space属性来实现。

• text-overflow用来设置超过容器宽度时的显示方式，可以有三个属性值：

• clip：溢出部分将被剪切，不显示省略号

• ellipsis：溢出部分显示省略号

• string：溢出部分显示自定义字符，需要通过content属性指定

• white-space用来设置如何处理对象内的空白符，可以有3种取值：

• normal：合并多个空白符，自动换行

• nowrap：忽略空白符，不自动换行
• pre-wrap：保留空白符，自动换行

根据以上的属性，可以通过如下代码实现限制文本长度，并在文本溢出时显示省略号：

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

以上代码使用100像素的宽度进行展示，并限制了对象内的空白符和文字不自动换行。超过100像素的文字将被隐藏，并显示省略号。

可以通过以下代码实现文本省略号和自定义省略号：

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

.ellipsis2::after {
  content: "...";
  color: red;
}

以上代码定义了一个宽度为120像素的对象，超过宽度的文字被省略，并由::after伪元素添加自定义的省略号。

这些方法可以用于展示新闻标题、短信等场景，非常实用。