CSS（Cascading Style Sheets），層疊樣式表，是一種用來添加樣式、布局和外觀的語言。當我們使用CSS來控制文本顯示時，有時候需要截取文本的前幾行，比如在新聞標題列表中，保持標題的一致性。下面我們來介紹一下如何使用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成功地截取了文本的前三行。