欧美精品免费观看二区/在线观看av/粉嫩国产精品14xxxxx/亚洲精品视频在线观看免费

如何防止長單詞破壞我的div
發(fā)布時(shí)間：2023-10-07

    有時(shí)，開發(fā)人員需要在網(wǎng)頁上顯示長單詞。例如，顯示 URL、長文件名等。有時(shí)，單詞長度大于父容器的長度，單詞會破壞容器。

    例如，我們創(chuàng)建了卡片來顯示文件詳細(xì)信息，而文件名很長，這可能會破壞卡片，這樣看起來總是更糟糕。因此，開發(fā)者需要通過換行來防止長單詞破壞div元素。

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

    示例 1（長單詞分解 div）
    在下面的示例中，我們創(chuàng)建了 div 元素并在 div 元素內(nèi)添加了“p”元素。此外，我們還在“p”元素的文本中添加了長單詞。

    在 CSS 中，我們設(shè)置了 div 元素的固定尺寸。在輸出中，用戶可以觀察單詞破壞 div 元素并從中溢出的時(shí)間。



    <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”屬性允許我們決定當(dāng)單詞超過容器寬度時(shí)應(yīng)如何斷開它們。

    需要不同的值來打破這個(gè)詞。 “normal”值僅在指定的斷點(diǎn)（例如空格、連字符等）處中斷單詞。“break-all”值將單詞從溢出的任何字符處中斷，“keep-all”值從不中斷單詞。詞。

    在這里，我們將使用“break-all”值將單詞與任何字符分開。

    語法

    用戶可以按照以下語法使用“word-break”CSS 屬性來防止長單詞破壞 div 元素。 


     word-break: break-all;


    示例 2（防止長單詞破壞 div）
    在下面的示例中，我們在容器 div 元素中添加了在第一個(gè)示例中添加的長單詞。在 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”屬性允許我們決定元素內(nèi)容從父元素溢出時(shí)應(yīng)如何換行。我們可以使用“overflow-wrap”屬性的“break-word”值來防止長單詞通過包裝來破壞 div 元素。

    語法
    用戶可以按照以下語法使用“overflow-wrap”CSS屬性來包裝長單詞。 

    overflow-wrap: break-word;


    示例 3
    在下面的示例中，我們添加了非常長的單詞作為“p”元素的文本。之后，我們使用父元素的“overflow-wrap”屬性，通過打破單詞將溢出的內(nèi)容包裝在下一行中。


    在輸出中，我們可以看到單詞從中間斷開，并在下一行顯示剩余的字符。 


    <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設(shè)置Overflow-wrap屬性）
    有時(shí)，我們需要使用 javascript 來防止長單詞破壞 div。例如，我們從數(shù)據(jù)庫中獲取產(chǎn)品數(shù)據(jù)，如果產(chǎn)品名稱很長，我們可以對特定產(chǎn)品使用“overflow-wrap”屬性來將長產(chǎn)品名稱包裹起來。


    在 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>

    用戶學(xué)會了使用不同的 CSS 屬性來防止長單詞破壞 div 元素。我們在第一種方法中使用了“word-break”CSS 屬性，指定瀏覽器應(yīng)如何斷詞。在第二種方法中，我們使用“overflow-wrap”CSS 屬性來指定如何處理 div 元素內(nèi)容的溢出。

    相關(guān)文章