How can I prevent long words from breaking my div?-CSS Tutorial-php.cn

How can I prevent long words from breaking my div?

WBOY

Release： 2023-08-30 16:29:06

forward

804 people have browsed it

How can I prevent long words from breaking my div?

Sometimes, developers need to display long words on a web page. For example, display URLs, long file names, etc. Sometimes the word length is greater than the length of the parent container and the word destroys the container.

For example, we created a card to show file details and the file name is very long, which may break the card, which always looks worse. Therefore, developers need to prevent long words from breaking div elements by wrapping them.

Before starting the solution, let us understand the problem through an example.

Example 1 (long word decomposition div)

In the example below, we create a div element and add a "p" element inside the div element. Additionally, we added long words to the text of the "p" element.

In CSS, we set a fixed size of the div element. In the output, the user can observe when the word breaks the div element and overflows from it.

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

Copy after login

Use the Word-break CSS property to break words

In this approach, we will use the "word-break" CSS property to prevent words from breaking the div element. The "word-break" attribute allows us to decide how words should be broken when they exceed the width of the container.

Different values are needed to break the word. The "normal" value breaks words only at specified breakpoints (e.g. spaces, hyphens, etc.). The "break-all" value breaks the word at any character that overflows, and the "keep-all" value never breaks the word. word.

Here we will use the "break-all" value to break the word from any character.

grammar

Users can use the "word-break" CSS property according to the following syntax to prevent long words from breaking div elements.

 word-break: break-all;

Copy after login

Example 2 (Prevent long words from damaging divs)

In the example below, we have added the long word we added in the first example inside the container div element. In CSS, we use the "word-break" property and the "break-all" value to prevent words from breaking div elements.

In the output, we can observe that the word breaks from a specific character and the remaining characters of the word are displayed in the next line.

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

Copy after login

Use Overflow-wrap attribute

The "overflow-wrap" attribute allows us to determine how the element content should wrap when it overflows from the parent element. We can use the "break-word" value of the "overflow-wrap" attribute to prevent long words from breaking the div element by wrapping.

grammar

Users can use the "overflow-wrap" CSS property to wrap long words according to the following syntax.

overflow-wrap: break-word;

Copy after login

Example 3

In the example below, we have added a very long word as the text of the "p" element. After that, we use the "overflow-wrap" attribute of the parent element to wrap the overflowed content in the next line by breaking the words.

In the output, we can see that the word is broken in the middle and the remaining characters are displayed on the next line.

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

Copy after login

Example 4 (Using JavaScript to set the Overflow-wrap attribute)

Sometimes, we need to use JavaScript to prevent long words from breaking the div. For example, we get the product data from the database, if the product name is very long, we can use the "overflow-wrap" attribute for a specific product to wrap the long product name.

In JavaScript we can access the HTML element and use the "overflowWrap" property of the style object to prevent long words from breaking the div element.

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

Copy after login

Users learned to use different CSS properties to prevent long words from breaking div elements. In the first method we use the "word-break" CSS property to specify how the browser should break words. In the second approach, we use the "overflow-wrap" CSS property to specify how to handle overflow of the div element's content.

The above is the detailed content of How can I prevent long words from breaking my div?. For more information, please follow other related articles on the PHP Chinese website!