CSS实现多行文本折叠，展开按钮右对齐文本

一、平常的多行文本截断：

HTML结构：

CSS样式：

.wrap-text-conten {

        overflow: hidden;

        text-overflow: ellipsis;

        text-align: justify;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

}

效果图：

二、展开按钮右下角对齐文本，用浮动实现，按钮需与文本同级在同一块级标签下：

HTML结构：

（以上showMore只是判断什么时候需要展开按钮，无需在意）

CSS样式：

.wrap-text-btn {

        float: right;

        clear: both;

        padding: 0;

        line-height: 24px;

        cursor: pointer;

}

其中btn重要样式属性是float、clear，其他样式属性自己看着调。

效果图：

 至此按钮已在文本右边，再之为父级标签.wrap-text添加伪类::before，把按钮挤下去：

.wrap-text::before {

        content: '';

        height: calc(100% - 24px);

        float: right;

}

效果图：

 最终完成按钮右对齐文本，如果没有右对齐，可调整父级节点的行高line-height属性；

以下是完整代码：

DOM结构：

import React, { useEffect, useState, useRef } from "react";

import { Text } from "tea-component";

import "@/assets/css/components/ellipsisText.css";

export default function index(props) {

  const { btnText, content, open } = props;

  const [showMore, setShowMore] = useState(false);

  const wrapTextRef = useRef(null);

  const contentRef = useRef(null);

  useEffect(() => {

    if (!wrapTextRef.current || !contentRef.current) return;

        contentRef.current?.getBoundingClientRect().height >         wrapTextRef.current?.getBoundingClientRect().height ? setShowMore(true) :         setShowMore(false);

  }, [wrapTextRef.current, contentRef.current])

  return (

    <div className="wrap">

      <div className="wrap-text" ref={wrapTextRef}>

        {

          showMore ?

            <Text className="wrap-text-btn is-link"

              onClick={() => open(content)}

            >

              {btnText}

            </Text> : ""

        }

        <Text className="wrap-text-content" ref={contentRef}>

          {content}

        </Text>

      </div>

    </div>

  )

}

 

SCSS样式：

.wrap {

    display: flex;

    &-text {

        font-size: $font-size-default;

        overflow: hidden;

        text-overflow: ellipsis;

        text-align: justify;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        position: relative;

        &::before {

            content: '';

            height: calc(100% - 24px);

            float: right;

        }

        &-btn {

            float: right;

            clear: both;

            margin-left: 4px;

            font-size: $font-size-default;

            padding: 0;

            line-height: 24px;

            cursor: pointer;

        }

    }

}

 项目使用react为例，样式使用了自动编译，无需在意，可自己调整。