有時，開發人員需要在網頁上顯示長字。例如，顯示 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中文網其他相關文章！
