在網頁設計中，有時我們需要讓一些元素不換行，而是讓它們全部顯示在一行中，這時就需要用到 CSS。接下來，本文將向大家介紹如何用 CSS 讓元素不換行。
一、white-space 屬性
white-space 屬性是控制元素中空格和換行的 CSS 屬性之一。透過設定 white-space 屬性，我們可以讓元素不換行或保留換行。
1.設定元素不換行
如果想要讓元素中的文字都在同一行顯示，可以將white-space 屬性設為nowrap，如下所示：
div{
white-space: nowrap;
}上述程式碼表示div 元素中的文字都不換行。
2.保留換行
如果想保留元素中的換行，可以將white-space 屬性設為pre 或pre-wrap，如下：
div{
white-space: pre;
}div{
white-space: pre-wrap;
}二、display 屬性
除了white-space 屬性，我們也可以使用display 屬性來實現元素不換行的效果。 display 屬性有兩個值可以使用：inline 和 inline-block。
1.inline
將元素的display 屬性設為inline，可以讓元素和文字在同一行顯示，如下所示：
span{
display: inline;
}上述程式碼表示span 元素和文字都在同一行顯示。
2.inline-block
將元素的display 屬性設為inline-block，可以讓元素和文字在同一行顯示，但可以設定元素的寬度和高度，如下所示：
div{
display: inline-block;
width: 100px;
height: 50px;
}上述程式碼表示div 元素和文字都在同一行顯示，並且設定了元素的寬度和高度。
三、overflow 屬性
有時，長文字會導致元素自動換行，如果想防止元素換行，可以使用 overflow 屬性。 overflow 屬性有兩個值：visible 和 hidden。
1.visible
將元素的overflow 屬性設為visible，表示允許元素內容溢出元素框，如下所示：
div{
overflow: visible;
}2.hidden
#將元素的overflow 屬性設為hidden，表示防止元素內容溢出元素框，如下所示：
div{
overflow: hidden;
}以上就是用CSS 讓元素不換行的三種方法：white-space 屬性、display 屬性和overflow 屬性。不同的情況下選擇不同的方法，可以讓網頁達到更好的顯示效果。
以上是css 怎麼讓元素不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！
