CSS是一種用來控制網頁樣式的語言，它可以讓我們實現各種各樣的效果。其中，讓文字橫向輸出就是一種常見的需求。下面，我們就來學習一下如何使用CSS來實現橫向輸出的文字效果。

首先，我們需要使用CSS的transform屬性來進行文字的旋轉。將文字旋轉90度，就可以使它們橫向輸出了。代碼如下：

.text {
transform: rotate(90deg);
}

上述代碼中，“.text”是我們想要橫向輸出的文本的類名。我們使用了transform：rotate(90deg)來實現文字的旋轉效果。

但是，使用以上方式旋轉文字輸出，會導致文字布局錯亂，如果想要文字整齊地橫向輸出，我們需要進行進一步的調整。下面我們將介紹兩種方法來實現文字的橫向輸出。

第一種方法是使用CSS的writing-mode屬性。

.text {
writing-mode: vertical-lr;
text-orientation: upright;
}

上述代碼中，“.text”是我們想要橫向輸出的文本的類名。我們使用了writing-mode: vertical-lr來讓文字豎直排列。同時，設置了text-orientation: upright將文字方向調整為朝上。（注：writing-mode后面的屬性還可以設置為vertical-rl、horizontal-tb等，可以根據實際需求進行選擇）。

第二種方法是使用CSS的display屬性。

.text {
display: inline-block;
white-space: nowrap;
transform: rotate(90deg);
}

上述代碼中，“.text”是我們想要橫向輸出的文本的類名。我們使用了display: inline-block將文本行內元素轉成塊級元素。同時，使用white-space: nowrap讓文字不換行。最后使用transform: rotate(90deg)旋轉文字輸出。

以上兩種方法選擇其中一種即可實現橫向輸出的效果。這樣，我們就可以輕松地在網頁中實現橫向輸出的文字效果了。