【笔记】css实现文本超出固定行数显示...和展开收起

最新推荐文章于 2024-08-22 11:20:46 发布

fafai0w0

最新推荐文章于 2024-08-22 11:20:46 发布

阅读量3.8k

点赞数 3

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44732259/article/details/128545046

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文本超出固定行数显示...和展开收起

项目中有时需要实现文字超出末尾显示…和展开收起按钮的需求，在我用js限制字符数实现之后，又去找了大佬用css实现的方法，发现这样更满足我的需求且更简单。

参考自https://blog.csdn.net/qq_32429257/article/details/122339194

思路：

float可以实现文字环绕效果
判断展开收起的状态，可以使用复选框和伪元素结合实现
复选框选中、未选中的两种状态，可以通过css input:checked选择器给伪元素加上不同的文字，如展开、收起
由于css无法实现判断，也就无法判断文字是否超出，即无论是否超出，展开按钮都会显示在文字末尾。该问题可以通过覆盖在按钮之上一层图形进行遮挡，使按钮失效，无法点击触发checkbox选中。

HTML结构

 <div class="overflowtext-box">
        <div class="overflowtext-wrap">
            <input type="checkbox" id="overflowtext-exp">
            <div class="overflowtext-text">
                <label class="overflowtext-btn" for="overflowtext-exp"></label>
                文字描述文字描述文字文字描述文字描述文字文字描述文字描述文字文字描述文字描述文字文字描述文字描述文字文字描述文字描述
            </div>
        </div>
    </div>

LESS样式

.overflowtext-box {
	/**其他样式**/
    width: 320px;
    background-color: rgb(231, 255, 255);
    position: absolute;
    left: calc(50% - 150px);
    line-height: 25px;
    top: 200px;
    /**关键代码-超出隐藏遮挡方块**/
    overflow: hidden;
    .overflowtext-wrap {
    	/**关键代码-解决高度设置为百分百失效的问题**/
        display: flex;
        .overflowtext-text {
        	/**默认显示三行文字并且文字截断**/
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-wrap: break-word;
            word-break: break-all;
            /** 设置float有文字环绕效果**/
            .overflowtext-btn {
                float: right;
                clear: both;
                &::after {
                    content: '展开';
                    color: #006eff;
                }
            }
            /** 占位：占高度，宽度设为0px**/
            &::before {
                content: '';
                float: right;
                width: 0px;
                height: 100%;
                margin-bottom: -25px; /**和主体行高一样**/
            }
            /**遮挡方块：和.overflowtext-box背景颜色设置一样的，为了在不溢出文字的时候遮挡展开按钮**/
            &::after {
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                background-color: rgb(231, 255, 255);
            }
        }
        /**选框（隐藏）**/
        #overflowtext-exp {
            display: none;
        }
        /**选中时：显示行数加大**/
        #overflowtext-exp:checked+.overflowtext-text {
            -webkit-line-clamp: 999;
            max-height: none;
            /**选中时：隐藏遮挡方块**/
            &::after {
                visibility: hidden;
            }
            /**选中时：文字显示收起**/
            .overflowtext-btn::after {
                content: '收起';
                color: #006eff;
            }
        }
    }
}