使用overflow实现多行文本的溢出部分处理-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用overflow实现多行文本的溢出部分处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 单行文本的处理

<style>
        .single-line {
            /* 1.首先得有个固定的宽高 */
            width: 300px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            /* 2.text-overflow 属性并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，需要在元素上添加几个额外的属性：overflow 和 white-space。 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

<div class="single-line">Hook 让你可以在组件中使用不同的 React 功能。你可以使用内置的 Hook 或者把它们组合起来建立你自己的。本页列出了 React 中所有的内置 Hook。</div>

2. 多行文本的处理

<style>
.multi-line {
            /* 1.定义宽高，高度正好包含三行 */
            width: 300px;
            height: 90px;
            line-height: 30px;
            border: 1px solid green;
            /* 2. 大部分情况下，也需要设置 overflow 属性为 hidden，否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号。 */
            overflow: hidden;
            display: -webkit-box;
            /* 3. -webkit-line-clamp CSS 属性可以把块容器中的内容限制为指定的行数。
                只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 box-orient 属性设置成 vertical时才有效果。*/
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
</style>

<div class="multi-line">React 是一个用于构建用户界面（UI）的 JavaScript 库，用户界面由按钮、文本和图像等小单元内容构建而成。React 帮助你把它们组合成可重用、可嵌套的 组件。从 web
        端网站到移动端应用，屏幕上的所有内容都可以被分解成组件。在本章节中，你将学习如何创建、定制以及有条件地显示 React 组件。</div>