CSS展开收起

有一个问题是，在上述例子中，把段落内容的“浮动元素”去掉后，段落最后从“行”字开始换行了，“收起”却不换行，也就是会存在有两个字内容看不见情况。

<style>
    .wrapper {
        /*
        使得 .text::before 有高度。
        flex 布局的子项，可以通过百分比计算变化高度。
        */
        display: flex;
        overflow: hidden;
        padding: 15px;
        margin: 50px auto;
        width: 800px;
        border-right: 8px;
        box-shadow: 20px 20px 60px #bebebe;
    }

    .text {
        position: relative;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 20px;
        text-align: justify;
        text-overflow: ellipsis;
        transition: .3s max-height;
    }
    /*
    加了这个使得 .btn 可以占据第三行位置
    从而使得省略号的位置不一定要在最右侧出现。
    这是个很棒的操作。
    在 .text 父元素中，内容都是行内元素，
    text::before 元素float动到右边，高度为 .text 高度减去按钮高度。
    */
    .text::before {
        float: right;
        content: '';
        height: calc(100% - 24px);
    }

    /*
    起到障眼法作用
    这个伪元素会紧接着在行内元素的后面
    当段落内容不足以出现省略号的时候，伪元素会把“展开”按钮遮住。
    */
    .text::after {
        position: absolute;
        content: '';
        width: 999vw;
        height: 999vw;
        margin-left: -100px;
        background-color: #000;
        box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    }

    /*
    浮动元素占据顶部位置，文字环绕浮动元素
    clear:right，是为了清除伪元素 .text::before 的影响。
    因为伪元素也右浮动，所以 .btn 会水平宽度允许情况下，存在于伪元素左边，
    可以视为如果没有伪元素，.btn 会在父元素最右边，所以这里使用 clear
    使得 .btn换行。
    */
    .btn {
        float: right;
        clear:right;
        margin-left: 10px;
        font-size: 16px;
        padding: 0 8px;
        color: #fff;
        cursor: pointer;
        background: #3F51B5;
        line-height: 24px;
        border-radius: 4px;
    }

    /*
    起到动态修改内容作用
    撑起.btn高度
    凡是用到动态修改内容的用 content
    */
    .btn::before {content: '展开';}

    .exp { display: none; }
    .exp:checked + .text {
        max-height: 200000px; /*超出最大行高度就可以了*/
        -webkit-line-clamp: 10000;
    }
    .exp:checked+.text::after{
        visibility: hidden;
    }
    .exp:checked + .text .btn::before {
        content: '收起';
    }

    /* 有一个问题是，在上述例子中，把段落内容的“浮动元素”去掉后，段落最后从“行”字开始换行了，“收起”却不换行，也就是会存在有两个字内容看不见情况。*/
    /*https://zhuanlan.zhihu.com/p/373359523*/
</style>
<div class="wrapper">
    <input id="exp1" class="exp" type="checkbox" />
    <div class="text">
        <label class="btn" for="exp1"></label>
        元素是如何定位的 正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。 在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行
    </div>
</div>

 

内容记录源自：https://zhuanlan.zhihu.com/p/373359523 ，感谢分享。