css截取前三行 |sass怎么编译成css

/*1.设置一个容器*/
.container {
display: -webkit-box; /* 将容器设置为弹性盒子（Flexbox）模型 */
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical; /* 设置方向为垂直 */
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-box-lines: multiple; /* 设置多行文本 */
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-flow: column wrap; /* 将文本元素放在容器的第一列 */
flex-flow: column wrap;
max-height: 6em; /* 限制容器的高度（三行文本的高度）*/
overflow: hidden; /* 隐藏超出容器的文本 */
}
/*2.设置文本元素*/
.text {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}

以上代码中，大家首先设置一个容器，使用CSS3的Flexbox模型，将容器设置为弹性盒子（display: flex）。然后通过设置max-height属性限制容器的高度，使其只能显示三行文本。最后，隐藏超出容器的文本（overflow: hidden）。

接下来，大家需要在容器中添加文本元素，在CSS中设置文本元素的样式，使其适应容器的大小：

<div class="container">
<div class="text">
<p>这是一段要截取的文本，大家需要显示其前三行。</p>
</div>
</div>

通过设置文本元素（.text）的flex属性为1，使其可以根据容器的大小自适应。如此，大家便通过CSS成功地截取了文本的前三行。