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

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

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

效果如下:

相关推荐
JamesGosling66626 分钟前
深入理解内容安全策略(CSP):原理、作用与实践指南
前端·浏览器
不要想太多27 分钟前
前端进阶系列之《浏览器渲染原理》
前端
七喜小伙儿38 分钟前
第2节:趣谈FreeRTOS--打工人的日常
前端
我叫张小白。41 分钟前
Vue3 响应式数据:让数据拥有“生命力“
前端·javascript·vue.js·vue3
laocooon52385788642 分钟前
vue3 本文实现了一个Vue3折叠面板组件
开发语言·前端·javascript
IT_陈寒1 小时前
React 18并发渲染实战:5个核心API让你的应用性能飙升50%
前端·人工智能·后端
科普瑞传感仪器1 小时前
从轴孔装配到屏幕贴合:六维力感知的机器人柔性对位应用详解
前端·javascript·数据库·人工智能·机器人·自动化·无人机
n***F8751 小时前
SpringMVC 请求参数接收
前端·javascript·算法
wordbaby2 小时前
搞不懂 px、dpi 和 dp?看这一篇就够了:图解 RN 屏幕适配逻辑
前端
程序员爱钓鱼2 小时前
使用 Node.js 批量导入多语言标签到 Strapi
前端·node.js·trae