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

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

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

效果如下:

相关推荐
海鸥两三11 分钟前
uniapp 小程序引入 uview plus 框架,获得精美的UI框架
前端·vue.js·ui·小程序·uni-app
lightgis1 小时前
16openlayers加载COG(云优化Geotiff)
前端·javascript·html·html5
小飞大王6661 小时前
TypeScript核心类型系统完全指南
前端·javascript·typescript
你的人类朋友3 小时前
✍️记录自己的git分支管理实践
前端·git·后端
合作小小程序员小小店4 小时前
web网页开发,在线考勤管理系统,基于Idea,html,css,vue,java,springboot,mysql
java·前端·vue.js·后端·intellij-idea·springboot
防火墙在线4 小时前
前后端通信加解密(Web Crypto API )
前端·vue.js·网络协议·node.js·express
Jacky-0084 小时前
Node + vite + React 创建项目
前端·react.js·前端框架
CoderYanger5 小时前
前端基础——CSS练习项目:百度热榜实现
开发语言·前端·css·百度·html·1024程序员节
i_am_a_div_日积月累_5 小时前
10个css更新
前端·css
倚栏听风雨5 小时前
npm命令详解
前端