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

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

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

效果如下:

相关推荐
你别说话了7 分钟前
Vue实现高效拖拽效果 vue-Draggable
前端·vue.js
万物智能14 分钟前
PWM散热风扇设置—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
前端·后端·算法
前端柱子25 分钟前
q-floodfill白边锯齿?一招搞定抗锯齿边缘问题
前端
阿虎儿27 分钟前
我的 HTML 样板(HTML Boilerplate)
前端·html
Amos_Web31 分钟前
Rspack 源码解析(八):Module、Chunk 与 Runtime ID
前端·rust·源码阅读
彭于晏分晏37 分钟前
深入理解 Vue 3 响应式原理:从 Proxy 到依赖收集
前端
晚安日记wanna40 分钟前
Vue3 script setup 的四层追问答到第三层才算过关
前端·vue.js·面试
前端柱子1 小时前
Chaikin‘s Corner Cutting 算法 应用canvas绘制平滑的曲线
前端
gnip1 小时前
uts 插件示例:获取设备电量信息
前端·javascript
码上成长1 小时前
Mapbox 上用 Turf 裁多边形:屏幕贴边了,接口却说越界
前端·前端框架