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

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

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

效果如下:

相关推荐
胡志辉的博客几秒前
前端反调试:常见套路、识别方法与绕过思路
前端·javascript·web安全·状态模式·安全威胁分析·代码混淆
牛奶15 分钟前
老板问我接口设计,我甩给他一个文档
前端·restful·graphql
gskyi20 分钟前
uni-app 高阶实战:onLoad与getCurrentPages深度技巧
前端·javascript·vue.js·uni-app
月明水寒27 分钟前
IDEA2026.1 vue文件报错
前端·javascript·vue.js·intellij-idea·idea·intellij idea
IpdataCloud29 分钟前
不同业务如何选IP查询更新频率?离线与在线协同策略
前端·网络协议·tcp/ip·html
牛奶29 分钟前
不经过服务器,两个人怎么直接通话?
前端·websocket·webrtc
神探小白牙33 分钟前
3D饼图,带背景图和自定义图例(threejs)
开发语言·前端·javascript·3d·vue
IT_陈寒36 分钟前
SpringBoot自动配置的坑差点没把我埋了
前端·人工智能·后端
光影少年41 分钟前
高级前端需要学习那些东西?
前端·人工智能·学习·aigc·ai编程
jiayong2344 分钟前
第 41 课:任务详情抽屉里的快速筛选联动
开发语言·前端·javascript·vue.js·学习