CSS不換行 超出滾動 在網頁設計中，有時候需要在一個區域內顯示大段的文本，但是這段文本如果一直換行顯示就會占用太多的頁面空間，影響了頁面布局效果。這時候可以使用CSS的不換行和超出滾動來解決這個問題。 不換行的方法很簡單，只需要在要不換行的文本所在的標簽上應用CSS樣式：white-space:nowrap; 就可以了。例如：

這是一段不換行的文本，如果過長會超出頁面邊界。

超出滾動也很容易實現，只需要在要超出滾動的標簽上應用CSS樣式：overflow:auto; 就可以了。例如：以上這兩種方法的組合，就可以解決大段文本占用過多頁面空間的問題。我們來看一個完整的例子：

<style type="text/css">
.wrap-ellipsis {
width: 200px;
height: 50px;
overflow: auto;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<p class="wrap-ellipsis">
這是一段會超出滾動且不換行的文本，如果過長會出現省略號。
</p>

上面的CSS樣式除了使用overflow:auto讓文本超出滾動，還使用了white-space:nowrap來讓文本不換行，以及text-overflow:ellipsis來讓文本超出后顯示省略號，看起來更加美觀。 總之，對于一些需要顯示大段文本的頁面，使用CSS的不換行和超出滾動效果可以提升頁面的布局效果和用戶的體驗。