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

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

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

效果如下:

相关推荐
breeze jiang24 分钟前
ESLint flat config 配置实战:五大字段、规则严重级别与 --fix 能力边界详解
开发语言·前端·javascript
书中枫叶35 分钟前
做了个「句拾」小程序,最难的不是业务,是字体
前端·javascript·vue.js
FFF_634560231 小时前
简单的画板小工具,下载即用
前端·javascript·css
嘟嘟07171 小时前
Next.js 里 SSR、CSR 和水合到底差在哪?从一段待办代码说起
前端·后端·next.js
南雨北斗1 小时前
回调地狱、jQuery jqXHR .then 链式、Promise + async/await写法对比
前端
liuxiaocheng1 小时前
快速上手:5 分钟跑通第一个 AI SDK 例子
前端·人工智能·后端
霹雳桃2 小时前
移动端 H5 折叠屏适配实战:为什么 max-width 没用,min(vw, px) 才是正解
前端·前端框架
Goodbye2 小时前
useContext 上下文与自定义 Hooks:跨层级数据共享的优雅方案
前端
新时代牛马2 小时前
Vue.js 响应式原理详解
前端·javascript·vue.js