背景
- “线上样式有个小问题，有时间帮忙改下”
- “诶，什么情况，订单信息的商品名称不是做了多行文本截取了吗，怎么没效果啦 ...”
是的，线上的多行文字截取没了
技术概况
多行文本
...
通常情况下会采用如下方案：
.multi-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
百试不爽 ...
然后，webpack bundle 配置 :
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: () => [autoprefixer],
},
},
{
loader: 'sass-loader',
},
],
}),
}
其中，
postcss
-
loader
使用了
autoprefixer
插件。
求解过程
1.查看线上页面元素样式，发现元素下的样式只有：
{
display: -webkit-box;
-webkit-line-clamp: 2;
}
2.拉取最新代码，本地构建，查看本地环境
“诶，我这是好的啊，是不是你电脑有问题啊，要不清个缓存吧，重启也行（：”
同事一句话惊醒梦中人：
云构建的包依赖是会更新到最新的，你把本地 node_modules 删了重新装一下试试
3.
rm
-
rf node_modules
&
npm i
，然后再看本地环境
“果然如此啊，那就是哪个包升级所导致的了”
4.首先，怀疑的肯定是
autoprefixer
，只有它会做类似的事情，先移除看看 ...
{
loader: 'postcss-loader',
options: {
sourceMap
: true,
plugins: () => [],
},
}
编译，wtf ... 怎么还是没有？难道还有包也干这种事情啊 ...
5.中间过程甚是艰辛，暂且不表，反正最后发现了
css loader 的 options 的配置里面其实是可以传 cssnano 的配置参数的
是的，去翻代码的看到了这样的玩意：
如果 css-loader 开启了 minimize, cssnano 的配置参数就可以通过 options 传进来了，比如：
{
loader: 'css-loader',
options: {
minimize: true,
zindex: true,
},
}
就可以开启构建中使用 cssnano 做 zindex 的优化了 ...
但是，有没有发现有个货不在里面？是的，autoprefixer 啊！autoprefixer 是默认开启的啊！fuck...
于是，options 中设置
autoprefixer
:
false
构建试试，在了！这次没消失！
敲黑板
：css-loader 中使用了 cssnano，
v0.26.0
之前的版本中默认开启 autoprefixer. 在 0.26.0 关掉了此配置。因此，如果你代码中有使用到 css-loader 并且无 cssnano 配置参数，建议升级，减少代码执行不确定性。
6.autoprefixer
autoprefixer issue 中，已经有相关的问题了，ai 给了回复：
一直在找构建工具的问题，忽略 CSS 本身是否有问题 ...
7.CSS
我们的 CSS 写法属于 Flexbox 的
old 2009 version
, 目前我们常用的
display
:
flex
属于现代的版本。
问题在于，因为有一定的浏览器支持度，2009 version 的写法似乎已经被大家下意识的“标准”化了，大家都在使用这种方式处理多行文字截取的问题，但是始终都是要被抛弃的...
我们上面遇到的问题就是一种体现，也是一种警醒 ...
如果你不想去改代码，可以指定构建时的浏览器支持度：
autoprefixer({
browsers: ['> 0.5%', 'last 2 versions']
})
多行文本的正确姿势
使用 weird webkit flexbox 去解决
...
的问题其实很奇怪，为什么要用 flexbox去解决这个问题，没想过 ... 而且给元素设置 padding 是会影响的:
加
padding
:
10px
后：
那该用什么方法解决呢？
最稳妥的方法应该是
JS 库
的介入了，比如：Clamp.js, 体积小且通用；
如果不想用 JS 库的话，我还看到了一种“歪”方法：
.text {
position: relative;
height: 3.6em; /* exactly three lines */
}
.text:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 20%;
height: 1.2em;
background
