如何在Less中实现文本溢出省略号的CSS封装_创建多行溢出处理Mixins-css教程-PHP中文网

单行省略需同时设置overflow: hidden、text-overflow: ellipsis、white-space: nowrap及块级显示；多行省略依赖-webkit-line-clamp且仅限WebKit/Blink，需display: -webkit-box、-webkit-box-orient: vertical，并注意响应式与动态内容下的渲染失效问题。

如何在less中实现文本溢出省略号的css封装_创建多行溢出处理mixins

Less中单行文本溢出省略号的正确写法

直接套用CSS原生写法在Less里会失效，因为white-space: nowrap和overflow: hidden必须与text-overflow: ellipsis同时存在才生效，且容器需有明确宽度（或max-width）。Less本身不改变CSS渲染逻辑，但容易漏掉关键约束条件。

容器必须是块级元素（display: block 或 inline-block），inline 元素无效
不能依赖父容器的width: 100%自动计算——如果父容器没设宽，子元素width: 100%会撑开，省略失效
text-overflow: ellipsis 对flex子项默认不生效，需额外加min-width: 0或overflow: hidden

.ellipsis-one-line() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

Less中多行文本溢出省略号的兼容性取舍

CSS原生不支持多行text-overflow: ellipsis，主流方案只有-webkit-line-clamp（仅WebKit/Blink内核），且它依赖display: -webkit-box这一整套组合拳。Firefox、Safari 16.4+ 之后才部分支持，IE完全不支持。

必须用display: -webkit-box，不能用flex或block替代
-webkit-box-orient: vertical 是硬性要求，漏写就无效果
line-clamp值为整数，不能是变量计算结果（Less编译时无法动态生成该属性）
高度不可靠：不同字体、字号、行高下，height很难精准匹配line-clamp × line-height，建议用max-height + overflow: hidden兜底

.ellipsis-two-lines() {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

封装成可复用Mixin时的关键参数设计

真正实用的Mixin要能控制行数、是否强制块级、是否保留原始display值。硬编码line-clamp: 2不如接受参数，但要注意：Less不能把变量注入-webkit-line-clamp的属性名里，只能注入值。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

第一个参数@lines必须是数字字面量（如2），不能是@n变量运算结果（否则编译后变成-webkit-line-clamp: @n，浏览器忽略）
可选第二个参数@display用于覆盖display值，默认-webkit-box，但若用户想保留inline-block，就得拆成两套Mixin
单行版无需@lines参数，但应和多行版命名区分开，避免误用

.ellipsis-multi(@lines) when (isnumber(@lines)) and (@lines > 1) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  overflow: hidden;
}
.ellipsis-multi(1) {
  .ellipsis-one-line();
}