首頁  >  文章  >  web前端  >  如何防止長單字破壞我的div?

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

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

如何防止長單字破壞我的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中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除