如何可以讓div內的元素不換行,如何讓一個div中的內容不換行

時間 2021-07-14 11:27:31

1樓:海里的月光

1、開啟vscode,建立一個測試頁面,在測試頁面中,新增一個寬度=300px的div,同時新增div的紅色邊框。此處設定固定寬度和邊框,是為了更好的演示換行與不換行。

2、在div標籤的內部,新增一些測試的文字,這些文字可以隨便新增,僅僅只是演示而已。文字不要太少,最少要佔據兩行的空間。

3、在瀏覽器中開啟測試頁面,可以看到預設div內部的文字就自動換行了。因此,在沒有設定強制不換行的情況下,讓其自動換行,不需要額外的設定。

4、如果想要div內部的文字強制不換行,使用下面這個css樣式即可。white-space: nowrap;。

5、在瀏覽器中,再次開啟測試頁面可以看到,div內部的文字強制沒有換行了,而且佔用的寬度已經超過了div預設的寬度了。

6、上面的效果,文字雖然強制沒有換行了。只不過還是不太好看,如果想要讓文字在div的寬度內強制不換行,超出的內容使用滾動條,就再加上一個樣式。

7、在瀏覽器中再次開啟測試頁面,就能看到文字沒有超過div預設的寬度了,也沒有換行,div寬度顯示不夠的文字,自動有了滾動條。

2樓:她是我的小太陽

如果可以橫向滾動,加

white-space:nowrap;

如果不換行且不顯示滾動條,超出的文字用表示,加white-space:nowrap;

overflow: hidden;

text-overflow:ellipsis;

3樓:匿名使用者

方法很多,比如2樓方法就可用,不過最簡單的方法還是給中間那個div加上 display:inline-block;屬性就搞定了

如何讓一個div中的內容不換行

4樓:匿名使用者

try:

第一組第二組

第三組第四組

第五組...

如何讓div中的兩個子div在一行上顯示

給兩個子div加上display inline block就可以在一行顯示了 div 裡面怎麼讓兩個標記在一行顯示呢?求指教!兩種常用方法 左左左左左左左 右右右右右右右 一 p left p right 二 中間如果有空格 他會留空格的 上面的就不會,你要塊狀也可以換成display inline...

如何讓決心離開我的男人回頭,如何讓一個決心離開我的男人回頭

花汐羽落 男人和女人結合在一起,一方面是靠緣分,一方面要靠雙方的努力。如果你還愛這個男人的話,可以從以下幾個方面去做 一 要寬容他。男人對自己失去興趣,說明自己的條件沒有達到他的標準。因此,自己心裡面要做的,是反省自己,而不是責怪他人。同時,如果你心裡把這件事當成無法原諒的事情,這件事就很不好解決,...

如何讓男人從心底的依賴自己,如何讓一個男人從心底的依賴自己

做個女強人吧 啥都強 人會喜歡依靠比自己強大的人 從男性角度分析 能讓男人依依不捨的女人是什麼樣的 怎樣讓一個男人對自己產生精神依賴和心理依賴 這個問題出發點不友善,我先把這個出發點放一邊,談談男人的想法,精神依賴和心理依賴對男人是不存在的,男人頂天立地,就算有委屈也絕不會對 老婆去訴說,只會讓女人...