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

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

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

效果如下:

相关推荐
Mintopia5 分钟前
Three.js 物理引擎:给你的 3D 世界装上 “牛顿之魂”
前端·javascript·three.js
Jeremy_Lee1239 分钟前
grafana 批量视图备份及恢复(含数据源)
前端·网络·grafana
import_random14 分钟前
[python]conda
前端
亲亲小宝宝鸭15 分钟前
写了两个小需求,终于搞清楚了表格合并
前端·vue.js
BUG收容所所长17 分钟前
栈的奇妙世界:从冰棒到算法的华丽转身
前端·javascript·算法
xingba26 分钟前
重写IE的showModalDialog模态框以兼容现代浏览器
前端·javascript·google
前端小巷子26 分钟前
Promise 静态方法:轻松处理多个异步任务
前端·面试·promise
梨子同志31 分钟前
JavaScript Set 和 Map 数据结构
前端·javascript
初辰ge36 分钟前
做个大屏既要不留白又要不变形还要没滚动条,我直接怒斥领导,大屏适配就这四种模式
前端·javascript
Face38 分钟前
路由Vue-router 及 异步组件
前端·javascript·vue.js