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

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

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

效果如下:

相关推荐
jerryinwuhan1 分钟前
marker BiBERTo解释
java·前端·人工智能
zhoumeina9910 分钟前
分段创建产品,tab 页切换又要保留缓存
前端·javascript
SilentSamsara10 分钟前
命令行工具开发:Click/Typer + 打包为独立二进制
linux·服务器·开发语言·前端·python·青少年编程·fastapi
恋猫de小郭13 分钟前
能在手机本地跑的图像生成模型 Bonsai Image ,效果还不错
前端·aigc·ai编程
Bigger14 分钟前
实战:搭建 AI Code Review 自动化流水线
前端·ci/cd·自动化运维
IT_陈寒20 分钟前
被Vite的HMR坑惨了,原来这样配置才能用对!
前端·人工智能·后端
怕浪猫26 分钟前
Electron 开发实战(七):网络通信与 API 集成全解
前端·javascript·electron
凌览30 分钟前
为什么我不推荐一人公司用PostgreSQL
前端·后端·node.js
王琦031833 分钟前
shell 第二章 变量和引用
前端·chrome
暗中讨饭xdm34 分钟前
立体echarts柱状图咋做
前端·vue.js·echarts