单行文本显示省略号和多行文本显示省略号

最新推荐文章于 2024-10-29 16:03:57 发布

未来aaa

最新推荐文章于 2024-10-29 16:03:57 发布

阅读量364

点赞数

分类专栏：前端文章标签： html5 css css3

本文链接：https://blog.youkuaiyun.com/weilai_a/article/details/121630633

版权

前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何使用CSS实现文本的单行和多行省略号显示效果，包括`white-space`、`overflow`、`text-overflow`等属性的使用。示例代码分别展示了单行和多行文本的省略号实现，特别提醒注意多行文本的浏览器兼容性问题。此方法适用于前端开发者在项目中处理文本溢出的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在工作中会遇到一些前端确实可以解决但却不经常遇到的问题。比如说让文本显示出省略号，这个问题其实不麻烦，但在实际项目中用到的次数很少，所以难免大家做的时候没有头绪，所以我在此统一写一下代码(如有不妥或有新的方法，欢迎讨论)。

 .box{
            width: 100px;
            height: 100px;
            background-color: pink;
            white-space: nowrap;/*默认normal自动换行，nowrap是强制不换行*/
            overflow: hidden;/*溢出部分隐藏*/
            text-overflow: ellipsis;/*溢出部分用省略号显示，ellipsis就是省略号的意思*/
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            overflow: hidden;/*溢出隐藏*/
            text-overflow: ellipsis;/*溢出的地方用省略号表示*/
            display: -webkit-box;/*转成弹性盒子*/
            -webkit-line-clamp: 2;/*省略号出现的行数*/
            -webkit-box-orient: vertical;/*让盒子内所有的元素垂直*/
        }

box这个盒子做的是单行文本的显示效果，box1这个盒子做的是多行文本的显示效果。特别要注意的是多行文本省略号显示要考虑兼容性。只在webkit浏览器下才有效。

文本省略号的显示交给后台人员做其实会很方便。