设置文字单行显示/多行显示

   文字的单行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            /* 隐藏溢出元素 */
            overflow: hidden;
            /* 单行显示 */
            white-space: nowrap;
            /* 溢出显示省略号 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <p>当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。</p>
</body>
</html>

 文字的多行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          p {
            width: 200px;
            overflow: hidden;
            /* 将对象作为弹性伸缩盒子模型显示 。 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数，即行数设置 */
            -webkit-line-clamp: 3;
            /* 规定框从上向下垂直排列子元素 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <p>当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。</p>
</body>
</html>

 

posted @ 2020-09-14 09:13  讲故事的人zz  阅读(707)  评论(0)    收藏  举报