文字溢出 生成 省略号

单行文字变省略号：

.box{
　　/* 1.固定宽度 */
　　width: 100px;
　　/* 2.空白处理：不折行 */
　　white-space: nowrap;
//<p> 中用: white-space:nowrap;
　　/* 3.溢出隐藏 */
　　overflow: hidden;
　　/* 4.文本超出：省略号 */
　　text-overflow: ellipsis
　　}

 

多行文字变省略号：

.right_content a {
    /* 多行文字+省略号 */
    width: 10rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 行数 */
    -webkit-line-clamp: 2;
    overflow: hidden;
}

问题1：如果 -webkit-box-orient: vertical； 在浏览器中没生效，审查元素也没有此样式。

原因及解决：autoprefixer不仅会帮你加-webkit-之类的prefixer，它还会帮你删除你自己写在 css/sass/less里的样式，真是厉害了

关闭autoprefixer的自动删除功能，这样：（用两行注释包一下）

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

再深究一下：

1.autoprefixer会帮你删除老式过时的代码
2.autoprefixer也会帮你增加新前缀

你可以增加remove: false这个配置项，就不会开启自动移除功能

postcss([ autoprefixer({ remove: false }) ]);

不仅如此，你还可以只让它移除老前缀，不自动增加新前缀

postcss([ autoprefixer({ add: false, browsers: [] })]);

 

问题2：

文字没有自动折行？

解决：

增加 word-break: break-all

p{
    word-break: break-all
}