首頁 >web前端 >css教學 >如何防止長單字破壞我的div？

如何防止長單字破壞我的div？

WBOY轉載: 2023-08-30 16:29:06800瀏覽

如何防止長單字破壞我的div？

有時，開發人員需要在網頁上顯示長字。例如，顯示 URL、長檔名等。有時，單字長度大於父容器的長度，單字會破壞容器。

例如，我們創建了卡片來顯示文件詳細信息，而文件名很長，這可能會破壞卡片，這樣看起來總是更糟。因此，開發者需要透過換行來防止長單字破壞div元素。

在開始解決方案之前，讓我們透過範例來了解問題。

範例 1（長字分解 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 屬性來斷詞

在這種方法中，我們將使用「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 元素並使用樣式物件的「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中文網其他相關文章！

JavaScript css html break 对象 overflow 数据库 word

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用 CSS 淡入淡出動畫效果下一篇：使用 CSS 淡入淡出動畫效果

看更多