css属性如何实现文字省略_利用溢出和省略属性组合

text-overflow: ellipsis 实现单行省略需同时设置 white-space: nowrap 和 overflow: hidden；多行省略须用 -webkit-line-clamp 配合 display: -webkit-box。

单行文字省略用 text-overflow: ellipsis 必须配 white-space: nowrap 和 overflow: hidden

只写 text-overflow: ellipsis 没用，浏览器根本不会触发省略逻辑。它只是“告诉浏览器：该省略时请显示省略号”，但前提得让文字不换行、容器截断内容。

三个属性缺一不可

• white-space: nowrap —— 强制单行，否则文字会自然折行，text-overflow 不生效
• overflow: hidden —— 容器必须有明确的宽高（或受父容器约束），且内容溢出时要裁剪掉，否则没“可省略”的边界
• text-overflow: ellipsis —— 真正渲染省略号的属性，仅对块级元素或 inline-block 有效

常见错误：给 加了 text-overflow 却忘了设 width 或 max-width，结果文字照常撑开容器——因为没触发 overflow。

多行文字省略不能靠 text-overflow，得用 -webkit-line-clamp

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

# safari  # 浏览器  # css  # edge  # js  # 字符串  # chrome  # 重绘  # firefox  # 安卓  # overflow  # webkit  # css属性 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】