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