如何防止长单词破坏我的 div?

cssweb developmentfront end technology更新于 2024/10/17 6:04:17

有时，开发者需要在网页上显示长单词。例如，显示 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' 值从任意字符处断开单词。

语法

用户可以按照以下语法使用 CSS 属性 'word-break' 来防止长单词断开 div 元素。

 word-break: break-all;

示例 2(防止长单词断开 div)

在下面的示例中，我们将在容器 div 元素中添加长单词，该元素已在第一个示例中添加。在 CSS 中，我们使用了带有"break-all"值的"word-break"属性，以防止单词中断 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 元素内容的溢出。