CSS3不折行

p {
white-space: nowrap; /*讓文本不折行*/
overflow: hidden; /*超出部分隱藏*/
text-overflow: ellipsis; /*超出部分顯示省略號*/
}

在我們的網頁設計中，文本折行是一個非常常見的問題。例如，在實現響應式設計時，我們需要在不同的設備上呈現不同的布局和文本大小。在這種情況下，如果文本折行，網頁的布局和設計可能會崩潰。另外，對于一些需要顯示大量文本信息的場景，例如網頁的注釋或者論壇上的留言，我們也希望能夠讓文本在顯示時不折行，以便用戶更加方便地查看。

那么，在CSS3中，我們可以通過使用 white-space 屬性來實現文本不折行。設置 white-space 屬性為 nowrap 可以讓文本在自己所在的容器框中不進行折行。此外，還可以使用 overflow 屬性將超出容器框的文本隱藏，以保持頁面的布局整潔。同時，我們也可以使用 text-overflow: ellipsis 屬性將超出部分顯示為省略號。通過這些屬性的組合，我們可以輕松地實現文本不折行的效果，提高網頁的可讀性和美觀度。

綜上所述，CSS3中的 white-space、overflow和text-overflow 屬性可以很好地解決文本折行的問題。它們可以幫助我們保持網頁布局整潔，提高用戶的體驗。在實現時，我們只需要在需要不折行的文本所在的元素上設置這些屬性即可。