CSS3 文字超过部分使用省略号替代

原创已于 2023-04-14 13:30:28 修改 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

于 2022-06-02 13:34:44 首次发布

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用CSS3实现文本超出宽度时以省略号显示的技巧，包括`width`, `overflow`, `text-overflow`, `-webkit-line-clamp`等属性的运用，以及针对英文文本的兼容解决方案。适合前端开发者掌握文本处理的高级样式。

1.一行中超出固定长度的部分以省略号显示


    width: 100px;   
    overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
    text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
    white-space: nowrap;     /*文本不换行*/

CSS3 文字超过部分使用省略号替代


-webkit-line-clamp: 1; /* 显示的行数 */
display: -webkit-box;/*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical;   /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
overflow: hidden;   /*文本会被修剪，并且剩余的部分不可见*/
text-overflow: ellipsis;   /*显示省略号来代表被修剪的文本*/

当遇到英文失效时，添加如下属性，兼容英文和数字