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

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

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

效果如下:

相关推荐
excel20 分钟前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓24 分钟前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人1 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every1 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad1 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新2 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易3 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员
风骏时光牛马3 小时前
AI稳定性治理体系构建与疑难问题深度分析
前端
IT_陈寒4 小时前
JavaScript的this坑人实录,这次我真的记下来了
前端·人工智能·后端
开开心心就好5 小时前
音频降噪剪辑工具,音量裁剪一键处理
运维·服务器·前端·spring·ocr·音视频·1024程序员节