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

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

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

效果如下:

相关推荐
妙码生花6 小时前
PHP 各框架下和 Go 的性能比较
前端·后端·go
Csvn6 小时前
TypeScript 类型性能:让类型体操不再卡死编译器
前端
万少6 小时前
等不到 Apple 的折叠 iPhone,我用 DeepV4.1Flash + workBuddy 一句话自己造了一台
前端·javascript·后端
梦曦i6 小时前
uni-router v0.2.0重磅发布:全链路拦截+重复导航优化
前端·uni-app
数据知道6 小时前
AES 加密实战——模式选择(ECB/CBC/GCM)与安全陷阱
前端·网络·安全
一夜枫林7 小时前
vue实现scroll-view上下滑动右侧左右滑动
前端·javascript·vue.js
苏三的开发日记7 小时前
npm EPERM:无法写入 `.npmrc` 的排查与解决
前端
YWL7 小时前
OpenLayers地图分享:URL参数同步+分享链接生成,让用户一键分享地图视角
前端·javascript·vue·openlayers
枫叶梨花7 小时前
Electrobun透明窗口在Windows上的输入穿透排查
前端·electron·bun
云上工程笔记9 小时前
AstraFlow + React/Vite:如何用自然语言开发并部署一个 AI 咖啡网站原型
前端·人工智能·react.js