如何設置才能讓div自動換行強制不換行

在網頁設計的過程中，div是經常利用的標簽，那么，若何設置才能讓div中的文字，主動換行或者強制不換行呢？

東西/原料

1
打開vscode，建立一個測試頁面，在測試頁面中，添加一個寬度=300px的div，同時添加div的紅色邊框。此處設置固心猿意馬寬度和邊框，是為了更好的演示換行與不換行
2
在div標簽的內部，添加一些測試的文字，這些文字可以隨便添加，僅僅只是演示罷了。文字不要太少，起碼要占有兩行的空間
3
在瀏覽器中打開測試頁面，可以看到默認div內部的文字就主動換行了。是以，在沒有設置強制不換行的環境下，讓其主動換行，不需要額外的設置
4
若是想要div內部的文字強制不換行，利用下面這個css樣式即可。white-space: nowrap;
5
在瀏覽器中，再次打開測試頁面可以看到，div內部的文字強制沒有換行了，并且占用的寬度已經跨越了div預設的寬度了
6
上面的結果，文字固然強制沒有換行了。只不外仍是不太都雅，若是想要讓文字在div的寬度內強制不換行，超出的內容利用滾動條，就再加上一個樣式
overflow: auto;
7
在瀏覽器中再次打開測試頁面，就能看到文字沒有跨越div預設的寬度了，也沒有換行，div寬度顯示不敷的文字，主動有了滾動條