css超出部分...样式或者多行...

这个是 一行的

  white-space:nowrap;//不换行
  overflow: hidden;//超出隐藏
  text-overflow: ellipsis;//变成...

效果图
css超出部分...样式或者多行..._第1张图片
注意:解决webpack不能编译scss文件中的-webkit-box-orient:vertical问题
处理多行文本溢出的样式,但是在webpack编译之后,-webkit-box-orient:vertical 这个样式丢失了
解决方法:

        .banner{
    width: 733px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
   /*!autoprefixer:off*/
	-webkit-box-orient: vertical;
	/*autoprefixer:on*/
    margin-bottom: 16px;
        }

    

效果图
css超出部分...样式或者多行..._第2张图片
微信超过2行出现省略号

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

效果
css超出部分...样式或者多行..._第3张图片

你可能感兴趣的:(CSS,css超出部分...样式)