SOURCE

<div class='ellipsis-box .line-4'>
	<!-- 用一个高度撑开父盒子并将展开按钮位置压到底部 -->
	<div class="top"></div>
	<!-- 右浮动后会自动挤压文档排版而不会覆盖，这是系统自动优化的BFC策略 -->
	<input 
        data-text="... 展开"  
        type="radio"  
        name="ellipsis" 
        class="open check-btn"
    > 
    <div class="content">
        asfafasfasfsfasfsfasf
        团队也维护了一个名为 VitePress 的静态站点生成器，
        你正在阅读的文档就是基于它构建的！VitePress 支持两种形式的 
        SSG。另外，NuxtJS 也支持 SSG
        你甚至可以在同一个 Nuxt 应用中通过不同的路由提供 SSR 和 SSG。
        <input 
            data-text="收起" 
            type="radio"  
            name="ellipsis" 
            checked 
            class="close check-btn"
        >
    </div>
</div>
<br>    
<div> 下文下文下文    </div> 
<br>  
<!-- 文本未超出时不显示 ...展开 -->
<div class='ellipsis-box .line-6'>
    <!-- 用一个高度撑开父盒子并将展开按钮位置压到底部 -->
    <div class="top"></div>
    <!-- 右浮动后会自动挤压文档排版而不会覆盖，这是系统自动优化的BFC策略 -->
    <input 
        data-text="...展开"  
        type="radio"  
        name="ellipsis-2" 
        class="open check-btn"
    > 
    <!-- 按钮和文本上下文顺序很重要 -->
    <div class="content">
        asfafasfasfsfasfsfasf
        团队也维护了一个名为  的静态站点生成器，
        你正在阅读的文档就是基于它构建的支持两种形式的 
        你甚至可以在同一个应用中通过不同的路由提供可以在同一个。
        团队也维护了一个名为  的静态站点生成器，
        你正在阅读的文档就是基于它构建的支持两种形式的 
        你甚至可以在同一个应用中通过不同的路由提供可以在同一个。
        <input 
            data-text="收起" 
            type="radio"  
            name="ellipsis-2" 
            checked 
            class="close check-btn"
        >
    </div>
</div>

:root {
    /* 实际展示行数会比这个--show-line数字多一行 问题不大，可以改变量名*/
    --show-line: 3;
}

body {
    background: green;
}

.line-2 {
    --show-line: 1;
}

.line-3 {
    --show-line: 2;
}

.line-4 {
    --show-line: 3;
}

.line-5 {
    --show-line: 4;
}

.line-6 {
    --show-line: 5;
}

.line-7 {
    --show-line: 6;
}

.line-8 {
    --show-line: 7;
}

.line-9 {
    --show-line: 8;
}

.line-10 {
    --show-line: 9;
}

.line-11 {
    --show-line: 10;
}

.line-12 {
    --show-line: 11;
}

.line-13 {
    --show-line: 12;
}

.line-14 {
    --show-line: 13;
}

.ellipsis-box {
    --line-height: 24px;
    --close-height: calc(var(--show-line)*var(--line-height));
    --font-size: 14px;
    position: relative;
    box-sizing: border-box;
    width: 300px;
    line-height: var(--line-height);
    /* 关键 */
    overflow: hidden;
    font-size: var(--font-size);
    background: gainsboro;
}

.top {
    /* 关键 */
    height: var(--close-height);
}

.open {
    /* 关键 */
    float: right;
}

.open,
.close {
    color: skyblue;
    /* 使单选按钮不显样式 */
    appearance: none;
}

.open::before,
.close::before {
    /* 撑开单选按钮尺寸 显示文字*/
    content: attr(data-text);
    font-size: var(--font-size);
}

.open:checked,
.close:checked {
    display: none;
}


/* 默认收起时的样式 */

.content {
    /* 方案一 如对文本背景色无要求直接如此就行 */
    /* max-height: var(--close-height); */
    /* 方案二 如对文本背景色有要求 则需处理; 注意+号两边留空格 */
    max-height: calc(var(--close-height) + var(--line-height));
    /* transition: all .3s; */
    margin-top: calc(-1* var(--close-height));
    background: inherit;
}


/* 文本未超出时 不显示展开按钮 遮盖掉展开按钮 最后一行顶满的情况下会有不必要的换行bug*/

.content::after {
    display: inline-block;
    content: '';
    position: absolute;
    right: 0;
    z-index: 9;
    height: calc(2* var(--font-size));
    width: calc(3* var(--font-size));
    /* 需要设置颜色 用以遮盖住展示按钮文字 */
    background: inherit;
}


/* 展开时的样式 */

.open:checked+.content {
    max-height: unset;
}

.open:checked+.content::after {
    display: none;
}