CSS 实现多行文本“展开收起”

转载自 作者：阅文前端团队 链接：https://juejin.cn/post/6963904955262435336 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

CSS 多行文本省略、展开/收起 - 图1

  1. <div class="wrapper">
  2.         <div class="text">
  3.             <button class="btn">这是一个占位</button>
  4.             浮动元素是如何定位的
  5. 正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
  7. 在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。
  8. 在前面的例子当中，浮动的元素的高度比它们所在的容器元素（是块元素）的高度小。然而如果块元素内的文本太短，不足以把块元素的大小撑到高度大于所有浮动元素的高度，我们可能会看到意想不到的效果。例如，如果上面图片中的文字只有"Lorem ipsum dolor sit amet,"，并且接下来是另外一个和"Floats Example"这个标题一样风格的标题元素，那么第二个标题元素会出现在红色的正方形之间。然而在大多数这种情况下，我们希望这个标题元素是靠左对齐的。为了实现这个效果，我们需要清除浮动。
  9.         </div>
  10.     </div>
  13. <div class="wrapper">
  14.         <div class="text" style="-webkit-line-clamp: 5;">
  15.             <button class="btn">这是一个占位</button>
  16.             浮动元素是如何定位的
  17. 正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
  19. 在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。
  20. 在前面的例子当中，浮动的元素的高度比它们所在的容器元素（是块元素）的高度小。然而如果块元素内的文本太短，不足以把块元素的大小撑到高度大于所有浮动元素的高度，我们可能会看到意想不到的效果。例如，如果上面图片中的文字只有"Lorem ipsum dolor sit amet,"，并且接下来是另外一个和"Floats Example"这个标题一样风格的标题元素，那么第二个标题元素会出现在红色的正方形之间。然而在大多数这种情况下，我们希望这个标题元素是靠左对齐的。为了实现这个效果，我们需要清除浮动。
  21.           在前面的例子当中，浮动的元素的高度比它们所在的容器元素（是块元素）的高度小。然而如果块元素内的文本太短，不足以把块元素的大小撑到高度大于所有浮动元素的高度，我们可能会看到意想不到的效果。例如，如果上面图片中的文字只有"Lorem ipsum dolor sit amet,"，并且接下来是另外一个和"Floats Example"这个标题一样风格的标题元素，那么第二个标题元素会出现在红色的正方形之间。然而在大多数这种情况下，我们希望这个标题元素是靠左对齐的。为了实现这个效果，我们需要清除浮动。
  22.         </div>
  23.     </div>
  1. /* 使用 flex，使 calc 动态高度起效（而不是高度为 0） */
  2. .wrapper {
  3.   display: flex;
  4.   overflow: hidden;
  5. }
  6. .text {
  7.   font-size: 20px;
  8.   overflow: hidden;
  9.   text-overflow: ellipsis;
  10.   text-align: justify;
  11.   /* display: flex; */
  12.   display: -webkit-box;
  13.   -webkit-line-clamp: 3;
  14.   -webkit-box-orient: vertical;
  15.   position: relative;
  16. }
  17. /* 将 btn 撑到右下角 */
  18. .text::before {
  19.   content: '';
  20.   height: calc(100% - 24px);
  21.   float: right;
  22.   /*动态高度：或者不用 calc，改为 margin */
  23.   /* height: 100%;
  24.   margin-bottom: -24px; */
  25. }
  26. .btn{
  27.   float: right;
  28.   clear: both;
  29.   margin-left: 10px;
  30. }

其他浏览器兼容处理（firefox、safari）

原因：display: flex / -webkit-box 设置该属性后，原本的文本好像变成了一整块，浮动元素也无法产生环绕效果，去掉之后浮动就正常了。
line-height + max-height

  1. .wrapper {
  2.   display: flex;
  3.   margin: 50px auto;
  4.   width: 800px;
  5.   overflow: hidden;
  6.   border-radius: 8px;
  7.   padding: 15px ;
  8.   box-shadow: 20px 20px 60px #bebebe,
  9.     -20px -20px 60px #ffffff;
  10. }
  11. .text {
  12.   font-size: 20px;
  13.   overflow: hidden;
  14.   text-overflow: ellipsis;
  15.   text-align: justify;
  16.   /* display: flex; */
  17. /*   display: -webkit-box;
  18.   -webkit-line-clamp: 3;
  19.   -webkit-box-orient: vertical; */
  20.   line-height: 1.5;
  21.   max-height: 4.5em;
  22.   position: relative;
  23. }
  24. .text::before {
  25.   content: '';
  26.   height: calc(100% - 26px);
  27.   float: right;
  28. }
  29. .btn{
  30.   position: relative;
  31.   float: right;
  32.   clear: both;
  33.   margin-left: 20px;
  34.   font-size: 16px;
  35.   padding: 0 8px;
  36.   line-height: 24px;
  37.   cursor: pointer;
  38.   border:0;
  39.   /* margin-top: -30px; */
  40. }
  41. .btn::before{
  42.   content: '...';
  43.   position: absolute;
  44.   left: -5px;
  45.   color: #333;
  46.   transform: translateX(-100%)
  47. }

展开/收起 状态

input[type=checkbox]

  1. <div class="wrap">
  2.   <input type="checkbox" id="exp">
  3.   <div class="text">
  4.     <label class="btn" for="exp">展开</label>
  5.     浮动元素是如何定位的
  6.   正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
  7.   </div>
  8. </div>
  1. .btn::before{
  2.   content:'展开'
  3. }
  4. .exp{
  5.   display: none;
  6. }
  7. .exp:checked+.text{
  8.   -webkit-line-clamp: 999;
  9.   /* 兼容用 max-height */
  10.   /* max-height: none; */
  11. }
  12. .exp:checked+.text .btn::before{
  13.   content:'收起'
  14. }

文字较少时，不需要省略号和展开收起

  1. .text::after {
  2.     content: '';
  3.     width: 100%;
  4.     height: 100%;
  5.     position: absolute;
  6.     background: #fff;
  7. }
  8. .exp:checked+.text::after{
  9.     visibility: hidden;
  10. }

完整版本：
点击查看【codepen】
兼容版本：
点击查看【codepen】

CSS 实现文本”不定行数”截断

转载自 作者：XboxYan
链接：https://juejin.cn/post/7022876094608982030
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

标题会制约内容的行数，所以文本超出是 “不定行” 的。详细规则如下：

  1. 整个容器高度是固定的，标题和内容总共 3 行
  2. 标题最多2行，超出省略
  3. 内容由剩余空间决定，如果标题占2行，则内容超出1行省略；如果标题占1行，则内容超出2行省略

是不是很灵（离）活（谱）的交互？可以充分利用页面空间，保证标题和内容都能展示出来，示意如下
CSS 多行文本省略、展开/收起 - 图2
点击查看【codepen】