当文本内容超出容器宽度时,显示省略标记(...)

当文本内容超出容器宽度时,可以使用CSS中的text-overflow属性来实现文字溢出显示小点点的效果。下面是一种常见的使用方法:

html 复制代码
<style>
 div {
            width: 200px;
            height: 18px;
            font-size: 16px;
            white-space: nowrap; /* 设置文本不换行 */
            overflow: hidden; /* 隐藏溢出部分 */
            text-overflow: ellipsis; /* 文字溢出显示省略号 */
        }
</style>

效果如下:

相关推荐
014-code13 小时前
Vue 生命周期完全指南
前端·javascript·vue.js
冴羽yayujs13 小时前
资深前端都在用的 9 个调试偏方
前端·javascript·调试
Amumu1213813 小时前
CSS移动端
前端·css·css3
lichenyang45313 小时前
组件设计模式与通信
前端·javascript·设计模式
im_AMBER14 小时前
前端性能优化之首屏提速
前端·学习·性能优化
天天向上102414 小时前
vue 大屏适配的一种实现思路
前端·javascript·vue.js
SuperEugene14 小时前
Vue/Vite 多环境配置实战:dev、test、prod 差异区分与避坑指南|Vue 工程化篇
前端·javascript·vue.js
结网的兔子14 小时前
前端学习笔记(实战准备篇)——用vite构建一个项目【吐血整理】
前端·学习·elementui·npm·node.js·vue
kyriewen14 小时前
盒模型:CSS 世界的物理法则,margin 塌陷与 padding 的恩怨情仇
前端·css·html
lichenyang45314 小时前
React 性能优化组件设计模式与通信
前端·javascript·设计模式