🏖️ 学习 - 多行文本溢出隐藏并且在最后显示查看更多按钮

SLYLXDYMJ

字数：318 字

时长：1 分钟

可恶的设计经常有在几行文本后面跟着查看更多按钮的需求
这其实很难做，一行文本可以用 padding 留出空
但是多行文本就没办法了
百度了下，有大神用 float 实现了

解决办法

<div class="txt">
  <!-- 这是跟在后面查看更多按钮 -->
  <button class="btn">查看更多</button>
  
  <!-- 这是文本 -->
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias cum debitis dolorum eos error est excepturi hic ipsum nostrum, odio placeat possimus quis soluta temporibus ullam unde veritatis voluptatem.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias cum debitis dolorum eos error est excepturi hic ipsum nostrum, odio placeat possimus quis soluta temporibus ullam unde veritatis voluptatem.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias cum debitis dolorum eos error est excepturi hic ipsum nostrum, odio placeat possimus quis soluta temporibus ullam unde veritatis voluptatem.
</div>

/* 给文本设置多行溢出隐藏效果 */
.txt {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 使用伪元素 before 占一个位置，但是宽度设置为 0 */
/* 注意：这里一定是 before，after 位置会不对 */
.txt:before {
  content: "";
  float: right;
  width: 0;
  height: 50px;
}

/* 通过浮动的特性把按钮放在右下角 */
/* 通过 translateY 调整位置 */
.btn {
  float: right;
  clear: both;
  margin-top: -10px;
}