可以使用CSS的text-overflow属性和white-space属性来控制文字溢出后展示省略号,同时可以使用content属性来设置省略号的样式。

具体做法如下:

.overflow-text {
  white-space: nowrap; /* 禁止换行,使文字在一行内显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分展示省略号 */
}

.overflow-text::after {
  content: "."; /* 设置省略号为一个小点 */
}

在上述代码中,我们通过设置white-space属性为nowrap来禁止文字换行,再通过设置overflow属性为hidden来隐藏超出部分,最后使用text-overflow属性来展示省略号。同时,我们还使用了伪元素::after来设置省略号的样式,将省略号设置为一个小点。

然后,我们只需要在需要展示省略号的元素上添加.overflow-text类即可。

css样式如何控制文字溢出后展示省略号且省略号只展示一个小点而不是三个小点?

原文地址: https://www.cveoy.top/t/topic/Yey 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录