单行文字溢出省略：
给容器添加css样式：
.text-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"title>Document</style> div{ width:200px; background-color lightblue margin0 auto; } .text-ellipsis overflowhidden text-overflow ellipsis white-space nowrap} bodydiv class="text-ellipsis"> 欧派整体橱柜定制简约现代 欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代 divhtml>
如果容器使用了flex布局：
此时单行文字省略会出问题
display flex justify-content center align-items>
解决方法：不能直接一起使用，可以加个span包裹住文字，在span标签上设置文字溢出隐藏
> span >欧派整体橱柜定制简约现代 欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代span>
多行文字溢出省略：
这个也是可以实现的，但是兼容性不太好，只兼容webkit内核的
180px .multiline-ellipsis-webkit-box/*流布局*/ -webkit-line-clamp 33行 -webkit-box-orient vertical从顶部向底部垂直布置子元素 normal !important word-wrapbreak-word允许长单词换行到下一行*/ ="multiline-ellipsis">
注意这里有个坑，那就是父元素高度最好自适应，高度过小或者过大都会崩
高度过小无法显示完整行数：
height50px>
高度过大，在省略号之后还会继续显示……
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。