博客

css单行文本省略号

width: 100px;         // 固定宽
white-space: nowrap;  // 不换行
overflow: hidden;     // 溢出隐藏
text-overflow: ellipsis; // 溢出时多出的部分显示省略号

css多行文本省略号

width: 100px;         // 固定宽
overflow:hidden;      // 文本溢出隐藏
text-overflow:ellipsis;  // 溢出显示省略号
display:-webkit-box;   // 设置盒属性
-webkit-box-orient:vertical;  // 设置盒属性后生效 从上向下垂直布置子元素  orhorizontal(水平)
-webkit-line-clamp:12;   // 文本显示行数

但elementUI设置多行文本省略号会不生效，搜集资料显示文件中 有  autoprefixer 管理浏览器前缀的插件，虽然可以帮助加 -webkit- 之类的前缀，但是部分样式会被删除，导致 -webkit-box-orient: vertical 属性编译后丢失了。

检查时发现package-lock.json文件中确实有插件，显示为  “autoprefixer”: “^10.2.4”,

所以需要在需要的属性前关闭 autoprefixer 。

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*autoprefixer: on */

即

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*autoprefixer: on */
-webkit-line-clamp: 15;

可是也没好用，单行文本省略号没有问题，但多行文本省略号就是失效，翻遍资料又加了一行样式，好用了。

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/*! autoprefixer: off */       // 使用控制注释来禁用Autoprefixer
-webkit-box-orient: vertical;
/*autoprefixer: on */
-webkit-line-clamp: 15;
word-break: break-all;         // 强制换行

最近整理之前遇到的问题，又找到一个解决办法（在出现问题的时候全网都没有，叹气），说是off on 不生效甚至报错的原因是写法过时了，需要改成下边的写法。先记录下来，有机会再试试这两种方法哪种好用。

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;