padding 影响文本多行溢出

多行溢出加上padding之后显示失效了

<!-- html结构 -->
<div class="wrap">
    这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字
</div>

.wrap {
	  padding: 10px;
      /* 移除隐藏 */
      overflow: hidden;
      /* 溢出用省略号显示 */
      text-overflow: ellipsis;
      /* 作为弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
      -webkit-box-orient: vertical;
      /* 显示的行数 */
      -webkit-line-clamp: 3;
    }

结果：

修改
在换行元素外边套一层

<!-- html结构 -->
  <div>
    <span class="wrap-three">这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字</span>
  </div>

	div {
      width: 300px;
      background: pink;
      padding: 10px;
    }
    
    .wrap-three {
      /* 移除隐藏 */
      overflow: hidden;
      /* 溢出用省略号显示 */
      text-overflow: ellipsis;
      /* 作为弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
      -webkit-box-orient: vertical;
      /* 显示的行数 */
      -webkit-line-clamp: 3;
    }

结果

OK，解决。

tip: 结尾附上单行文本溢出显示省略号

.wrap {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

大家加油！！！