今天我們要來介紹一下文字橫排變豎排的 CSS。將橫排轉變為豎排不僅可以使網頁排版更加美觀，也可以適應一些特殊的設計要求。下面就來看看 CSS 如何實現文字橫排變豎排。 首先，我們需要將文字旋轉 90 度，使其變成豎排。CSS 中有一個屬性 transform 可以實現這個效果。我們可以在 CSS 樣式中添加如下代碼： pre { transform: rotate(-90deg); transform-origin: right top; } 上述代碼中，我們使用 transform 將文字旋轉了 90 度，并設置了 transform-origin 屬性，該屬性用來指定旋轉的軸心位置。 但是，如果只是旋轉文字，會導致文字超出容器邊界。為了解決這個問題，我們需要通過允許文字換行來進行排版。可以使用以下的代碼： pre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translate(100%, 0) rotate(90deg); transform-origin: top left; } 上述代碼中，我們使用 white-space: nowrap; 來禁止文字自動換行，并使用 overflow 和 text-overflow 屬性來控制當文字超出容器邊界時如何顯示。最后，我們將文字向右平移 100% 容器寬度距離并旋轉 90 度，使其變成豎排。同時，我們還需要重新設置 transform-origin 屬性。 總結一下，實現文字橫排變豎排的 CSS 樣式大致分為兩步：一是將文字旋轉 90 度，二是通過允許文字換行來進行排版。我們可以使用 transform、white-space、overflow 和 text-overflow 屬性來實現這一功能。希望本文能夠幫助大家更好地掌握 CSS 技巧。