有時,開發人員需要在網頁上顯示長字。例如,顯示 URL、長檔名等。有時,單字長度大於父容器的長度,單字會破壞容器。
例如,我們創建了卡片來顯示文件詳細信息,而文件名很長,這可能會破壞卡片,這樣看起來總是更糟。因此,開發者需要透過換行來防止長單字破壞div元素。
在開始解決方案之前,讓我們透過範例來了解問題。
在下面的範例中,我們建立了 div 元素並在 div 元素內新增了「p」元素。此外,我們還在「p」元素的文字中加入了長字。
在 CSS 中,我們設定了 div 元素的固定尺寸。在輸出中,使用者可以觀察單字破壞 div 元素並從中溢出的時間。
<html> <head> <style> .container { width: 300px; border: 1px solid #ccc; padding: 10px; font-size: 1.5rem; } </style> </head> <body> <h2> Long words breaking the div in HTML5 </h2> <div class = "container"> <p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv. </p> </div> </body> </html>
在這種方法中,我們將使用「word-break」CSS 屬性來防止單字破壞 div 元素。 「word-break」屬性允許我們決定當單字超過容器寬度時應如何斷開它們。
需要不同的值來打破這個字。 「normal」值僅在指定的斷點(例如空格、連字符等)處中斷單字。 「break-all」值將單字從溢出的任何字元中斷,「keep-all」值從不中斷單字。詞。
在這裡,我們將使用「break-all」值將單字與任何字元分開。
使用者可以按照以下語法使用「word-break」CSS 屬性來防止長單字破壞 div 元素。
word-break: break-all;
在下面的範例中,我們在容器 div 元素中新增了在第一個範例中新增的長單字。在 CSS 中,我們使用「word-break」屬性和「break-all」值來防止單字破壞 div 元素。
在輸出中,我們可以觀察到單字從特定字元中斷,在下一行中顯示該單字的剩餘字元。
<html> <head> <style> .container { width: 300px; border: 1px solid #ccc; padding: 10px; font-size: 1.5rem; } .long-word { word-break: break-all; } </style> </head> <body> <h2> Preventing the long words breaking the div in HTML5 </h2> <div class = "container"> <p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv.</p> </div> </body> </html>
「overflow-wrap」屬性讓我們決定元素內容從父元素溢出時應如何換行。我們可以使用「overflow-wrap」屬性的「break-word」值來防止長單字透過包裝來破壞 div 元素。
使用者可以依照以下語法使用「overflow-wrap」CSS屬性來包裝長字。
overflow-wrap: break-word;
在下面的範例中,我們加入了非常長的單字作為「p」元素的文字。之後,我們使用父元素的「overflow-wrap」屬性,透過打破單字將溢出的內容包裝在下一行。
在輸出中,我們可以看到單字從中間斷開,並在下一行顯示剩餘的字元。
<html> <head> <style> .container { width: 300px; border: 1px solid #ccc; padding: 10px; overflow-wrap: break-word; } </style> </head> <body> <h3> Preventing the long words breaking the div in HTML5 using the overflow-wrap property </h3> <div class = "container"> <p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p> </div> </body> </html>
有時,我們需要使用 JavaScript 來防止長單字破壞 div。例如,我們從資料庫中取得產品數據,如果產品名稱很長,我們可以對特定產品使用「overflow-wrap」屬性來將長產品名稱包裹起來。
在 JavaScript 中,我們可以存取 HTML 元素並使用樣式物件的「overflowWrap」屬性來防止長單字破壞 div 元素。
<html> <head> <style> .container { width: 300px; border: 1px solid #ccc; padding: 10px; } </style> </head> <body> <h3> Preventing the long words breaking the div in HTML5 using the <i>overflow-wrap</i> property </h2> <div class = "container"> <p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p> </div> <script> let longWord = document.querySelector('.long-word'); longWord.style.overflowWrap = 'break-word'; </script> </body> </html>
使用者學會了使用不同的 CSS 屬性來防止長單字破壞 div 元素。我們在第一種方法中使用了「word-break」CSS 屬性,指定瀏覽器應如何斷詞。在第二種方法中,我們使用「overflow-wrap」CSS 屬性來指定如何處理 div 元素內容的溢位。
以上是如何防止長單字破壞我的div?的詳細內容。更多資訊請關注PHP中文網其他相關文章!