資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何防止長單詞打斷我的 div？
有時，開發者需要在網頁上顯示長單詞。例如，顯示 URL、長檔名等。有時，單詞長度大於父容器的長度，單詞會打斷容器。
例如，我們建立了卡片來顯示檔案詳細資訊，並且檔名很長，這可能會打斷卡片，這看起來總是很糟糕。因此，開發者需要透過換行來防止長單詞打斷 div 元素。
在我們開始瞭解解決方案之前，讓我們透過示例來理解問題。
示例 1（長單詞打斷 div）
在下面的示例中，我們建立了 div 元素並在 div 元素內部添加了 'p' 元素。此外，我們在 'p' 元素的文字中添加了長單詞。
在 CSS 中，我們設定了 div 元素的固定尺寸。在輸出中，使用者可以觀察到長單詞是如何打斷 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 屬性來打斷單詞
在這種方法中，我們將使用 'word-break' CSS 屬性來防止單詞打斷 div 元素。'word-break' 屬性允許我們決定當單詞超出其容器寬度時應如何打斷單詞。
它採用不同的值來打斷單詞。'normal' 值僅在指定的斷點（如空格、連字元等）處打斷單詞。'break-all' 值從任何溢位的字元處打斷單詞，而 'keep-all' 值永遠不會打斷單詞。
這裡，我們將使用 'break-all' 值從任何字元處打斷單詞。
語法
使用者可以按照以下語法使用 'word-break' CSS 屬性來防止長單詞打斷 div 元素。
word-break: break-all;
示例 2（防止長單詞打斷 div）
在下面的示例中，我們在容器 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’ 屬性允許我們決定如果元素的內容溢位父元素，則應如何換行。我們可以對 'overflow-wrap' 屬性使用 'break-word' 值，透過換行來防止長單詞打斷 div 元素。
語法
使用者可以按照以下語法使用 'overflow-wrap' CSS 屬性來換行長單詞。
overflow-wrap: break-word;
示例 3
在下面的示例中，我們將很長的單詞新增為 '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>
示例 4（使用 JavaScript 設定 Overflow-wrap 屬性）
有時，我們需要使用 JavaScript 來防止長單詞打斷 div。例如，我們從資料庫獲取產品資料，如果產品名稱很長，我們可以對特定產品使用 'overflow-wrap' 屬性來換行長產品名稱。
在 JavaScript 中，我們可以訪問 HTML 元素並使用 style 物件的 '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 元素內容的溢位。
1K+ 閱讀量
