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

2021-07-14 11:27:32 字數 952 閱讀 6537

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:

第一組第二組

第三組第四組

第五組...

如何讓不愛學習的孩子學習好,如何讓乙個不愛學習的孩子學習好

不知道你是不是做父母的,我感覺應該是吧。其實最重要的,也是做父母最容易忽略的,平時不要對他強求多少,最重要的是不要經常拿自己的孩子和別人的比,但他一旦有進步一定要獎勵,要經常鼓勵他,讓他慢慢培養自信心。既然現在他不愛學習,現在不要抱多大的希望,只要他比以前強就行了。如果他慢慢變好了,那就另作打算,走...

如何讓人的心靈得到成長如何讓乙個人的心靈得到成長

成長需要經歷很多事情,需要你把心開啟了,需要你有勇氣去做很多事情了,這個過程比較長。我覺得乙個人不能成長是因為他沒有去做足夠多的事情,你事情經歷得多了,成長也就來了,每個人都知道這個道理,但很多人都不去做,為什麼,因為他們不敢!或者做了一部分就放棄了,沒有堅持去做的勇氣,為什麼?因為內心缺乏乙份力量...

如何從失戀的陰影中走出來,如何讓乙個人從自卑的心理走出來?

失戀並不可怕,可怕的是我們不敢去面對。好多的事情不是我們不能夠去忘記,而是我們不想去忘記。這個世界沒有十全十美的事情,只有用自己的五全五美加上對方的才是十全十美。愛需要理智.乙份沒有理智的愛情.就象一匹沒有方向的野馬.不知道他會跑到那裡去?如果理智過度又會抹殺了愛情.愛情他沒有十全是美麗的.用自己的...