今天我們來學習如何用CSS來顯示兩排文字。在某些情況下，我們可能需要在同一個DIV中顯示兩排文字，比如顯示商品名字和價格。那么該怎么做呢？下面我們就來分步介紹。 首先，我們需要在HTML中先創建一個DIV，用于包裹兩排文字。在這個DIV中，我們可以使用兩個P標簽來分別包裹兩排文字。

<div class="double-text">
<p class="text1">這是第一行文字</p>
<p class="text2">這是第二行文字</p>
</div>

接下來，我們需要在CSS中對這個DIV進行樣式設置。我們可以使用Flexbox來實現兩排文字的顯示。首先，讓這個DIV的display屬性為flex即可。

.double-text {
display: flex;
}

然后，我們需要對兩個P標簽進行詳細設置。我們可以設置這個DIV為flex-wrap，這樣第二個P標簽就會自動跑到下一行。需要注意的是，我們需要讓每個P標簽的flex-basis屬性設為100%。

.text1, .text2 {
flex-basis: 100%;
}
.double-text {
flex-wrap: wrap;
}

最后，我們還可以根據需要對兩個P標簽進行顏色、字體大小等樣式的設置。

.text1 {
font-size: 24px;
color: red;
}
.text2 {
font-size: 16px;
color: black;
}

這樣，我們就成功地實現了用CSS來顯示兩排文字啦！當然，除了使用Flexbox，我們還可以通過其他方法來實現兩排文字的顯示，比如使用Grid布局等。大家可以根據自己的需要來選擇不同的方法。