简单介绍一下单行超出显示省略号
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
overflow: hidden;溢出隐藏
white-space: nowrap;文字不能转行
text-overflow:ellipsis;隐藏的部分用...表示
大招来了,多行超出显示省略号
overflow: hidden;首先是溢出隐藏,不可或缺
display: -webkit-box;弹性盒模型显示
-webkit-box-orient: vertical;盒模型元素的排列方式
-webkit-line-clamp: 3;显示行数
text-overflow: ellipsis;
但是问题来了,本地运行是成功的,但是webpack编译之后,奇怪的事情的发生了,
-webkit-box-orient: vertical;这句css消失了,就这样莫名其妙的消失了。
找问题吧,
网上有两种解决方法:
1.
使用
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
替换
-webkit-box-orient: vertical;
重新编译,发现还是还是消失了,我也不太清楚别人为什么可以,反正我的不可以,
然后替换成(多了个 ! )
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
再次编译,总算出现了,成功。
2.
optimize-css-assets-webpack-plugin
这个插件的问题
注释掉webpack.prod.conf.js
中下面的代码
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
虽然-webkit-box-orient: vertical;未消失,但是有一个小问题,
这个插件是做css压缩的,也就是说,你要是删除了这个插件,你的css就不会被压缩。
以上两种方法亲测可用,不过,还是没有太了解其中的原理。
不过,上面介绍的多行超出显示省略号,有兼容性问题,这个属性只适合webkit浏览器或移动端(绝大部分是webkit内核的)浏览器,比较好的方式是设置相对定位容器的高度,用包含省略号(...)的元素模拟实现:
.blog-content {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
margin-bottom: 8px;
}
.blog-content:after {
content: "...";
font-weight: 800;
position: absolute;
bottom: 0;
right: 0;
// padding:0 20px 1px 45px;
}