css实现文字过长显示省略号

PHP中文网 • 2025年3月10日 20:53:15 • 编程技术 • 阅读 2

本篇文章介绍了css实现文字过长显示省略号的方法，具有一定的参考价值，希望对学习css的朋友有帮助！

一、CSS样式解决文字过长显示省略号问题

1、一般样式

一般 css 样式，当宽度不够时，可能会出现换行的效果。这样的效果在某些时候肯定是不行的，可以修改 css 样式来解决这个问题。

nbsp;html> text-overflow .demo-split { width: 500px; height: 100px; border: 1px solid #dcdee2; background: palegreen; } .demo-split-pane { padding: 10px; color: red; }

未使用 clip 自适应宽度

未使用 ellipsis 自适应宽度

new Vue({ el: '#app', data() { return { split: 0.4 } } })

登录后复制

左侧宽度变小，文字换行。

( 推荐学习：CSS教程 )

立即学习“前端免费学习笔记（深入）”；

右侧宽度变小，文字换行。

2、文字过长显示省略号或显示截取的效果

【通常写法：】    .test_demo_clip {        text-overflow: clip;        overflow: hidden;        white-space: nowrap;        width: 200px;        background: palegreen;    }    .test_demo_ellipsis {        text-overflow: ellipsis;        overflow: hidden;        white-space: nowrap;        width: 200px;        background: palegreen;    }【说明：】    text-overflow：表示当文本溢出时是否显示省略标记，ellipsis表示省略号效果，clip 表示截取的效果。    overflow:hidden;  将文本溢出的内容隐藏。    white-space:nowrap;  是禁止文字换行。    width：  （可选）可以写固定值，也可以根据宽度自适应显示效果。

登录后复制

nbsp;html> text-overflow .test_demo_clip { text-overflow: clip; overflow: hidden; white-space: nowrap; width: 200px; background: palegreen; } .test_demo_ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 200px; background: palegreen; } .test_demo_defined_Width_clip { text-overflow: clip; overflow: hidden; white-space: nowrap; background: bisque; } .test_demo_defined_Width_ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background: bisque; } .demo-split { width: 500px; height: 100px; border: 1px solid #dcdee2; background: palegreen; } .demo-split-pane { padding: 10px; }