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

2021-07-14 11:27:31 字數 952 閱讀 3745

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:

第一組第二組

第三組第四組

第五組...

如何讓悲觀的人變的樂觀,如何讓一個悲觀的人變的樂觀

那很好啊 什麼事都要考慮壞的結果 不能一直往好處想 用你悲觀的態度去審視別人 去提醒你自己 人生還需要努力 因為你還是獵物,不是獵人!那是因為你對你自己沒信心,你要豎立起你的信心 現實總有一些事讓抄人不順心,不用刻意去躲避,不用想太多,讓一切順其自然,用平靜的心態對待,教你一個祕訣,如果你遇到煩心事...

如何讓沉默的人變得健談呢,如何讓一個沉默的人變得健談呢?

突然由沉默變得健談的人,往往是剛遇到了一些事情,並且這些事情均是他們不願意再次提起的。說得再明白一點,就是他們心裡有 鬼 為了不再面對這個 鬼 他們會想盡辦法引開話題,把對方的思維引向別處。至於那個在喜歡自己的男孩子面前突然變得滔滔不絕的女孩子,則很可能是因為她不喜歡對方,不希望聽到對方表白,以免使...

如何讓不理你的女生喜歡你,如何讓一個不理你的女生喜歡你

關注她的興趣愛好,關心她的生活與情感,不著痕跡地照顧她。你如果發訊息,對方始終沒有回。那你就不要再發了。否則會引起多方的反感。如果對方沒有想聯絡的樣子,請保持男人的尊嚴。不要再去理他。樓大別操之過急.也許她只是不清楚該如何迴應你罷 或者是處在兩難的境地.給對方一點時間嗎 勸你不要再掙扎了,沒有好結果...