Note: the word-wrap property was originally a private property of Microsoft, and has been renamed overflow-wrap in the current draft text specification of CSS3. Word-wrap is now an “alias” for overflow-wrap. Stable versions of Google’s Chrome and Opera browsers support the new syntax.

Long word wrap problem

Overflow-wrap is used to indicate whether browsers allow word breaks to prevent overflow when an unbreakable string is too long to fill its wrap box.

Default overflow-wrap: normal; The following is not newline:

When overflow-wrap is set to break-word, long text can be truncated:

While overflow-wrap still has an anywhere value, it is not discussed today.

CSS3 several new width members

Flex Nowrap is not a simple line-breaking display, but requires min-content knowledge. For reference, this article is written by Zhang Xinxu: Understand CSS3 Max /min-content and fit-content width values.

Explain the minimum width min-content:

<div style="background-color: greenyellow;">
      <div style="width: 100px; height: 20px; margin-bottom: 50px; background-color: #f2f;">1</div>
      <div style="width: 200px; height: 20px; margin-bottom: 50px; background-color: #f2f;">2</div>
      <div style="width: 300px; height: 20px; margin-bottom: 50px; background-color: #f2f;">3</div>
      <div style="width: 400px; height: 20px; margin-bottom: 50px; background-color: #f2f;">4</div>
    </div>
Copy the code

The four boxes are arranged in vertical rows, and the parent box is propped up in the standard document flow sub-box, and the width fills automatically, so that greenyellow is all over the screen.

When changing the width to min-content:

<div style="width: min-content; background-color: greenyellow;">
      <div style="width: 100px; height: 20px; margin-bottom: 50px; background-color: #f2f;">1</div>
      <div style="width: 200px; height: 20px; margin-bottom: 50px; background-color: #f2f;">2</div>
      <div style="width: 300px; height: 20px; margin-bottom: 50px; background-color: #f2f;">3</div>
      <div style="width: 400px; height: 20px; margin-bottom: 50px; background-color: #f2f;">4</div>
    </div>
Copy the code

Greenyellow becomes 400px and shrinks to the maximum width of the child element, which is the width of the element with the largest minimum width value inside the min-content as the final container width.

flex-wrap: nowrap;

  • flex-wrap: nowrap; The default value is displayed on a single line without line breaks. Therefore, it is easy to appear the scene of width overflow, and its rendering performance is complicated, so it is necessary to have a certain understanding of CSS3 width. You can read the article “Understanding CSS3 Max /min-content and Fit-Content width values”. The specific performance is as follows (taking horizontal layout as an example) :

    • If the sum of min-content is greater than the width of the Flex container, the content overflows, which is similar to white-space: NowRAP.

    • If the sum of the min-content min widths of flex children is less than the flex container width:

      • Default for flex subitemsfit-contentIf the sum of the widths is greater than the width of the Flex container, the flex child widths shrink to fill the Flex container without overflow.
      • Default for flex subitemsfit-contentIf the sum of the widths is less than the width of the Flex container, the Flex child entries arefit-contentThe width is displayed normally, and the content does not overflow.

The above excerpt from zhang Xinxu’s article: Write for yourself to see the display: Flex layout tutorial, as a theorem placed here, the phenomenon will be referenced below.

Normal box length text wrap display

The online demo code can be accessed directly: codepen. IO /lehollandai…

The code is as follows:

<style>
  .parent {
    width: 200px;
    overflow-wrap: break-word;
    background: gold;
    border: 1px solid transparent;
  }
  .parent div {
    background: silver;
    margin: 5px;
  }
</style>
<h2>Example without <code>display:flex</code>:</h2>
<div class="parent">
  <div>Sidebar with fixed with</div>
  <div>this is a flexible box with a really loooooooooooooooooooooooooooooooooooong word inside.</div>
</div>
Copy the code

overflow-wrap: break-word; It works perfectly well.

Flex layout long text newline display exception

The code is surprisingly simple:

<style>
  .parent {
    width: 200px;
    overflow-wrap: break-word;
    background: gold;
    border: 1px solid transparent;
  }
  .parent div {
    background: silver;
    margin: 5px;
  }
  #parent-flex {
    display: flex;
  }
</style>
<h2>Example with <code>display:flex</code>:</h2>
<div class="parent" id="parent-flex">
  <div>Sidebar with fixed with</div>
  <div>this is a flexible box with a really loooooooooooooooooooooooooooooooooooong word inside.</div>
</div>
Copy the code

Flex layout subitem width: min-content; Wide, so each item is the longest word in each box, because we have no direct set items min – the content, the length of the Sidebar + loooooooooooooooooooooooooooooooooooong two words takes up the width of the combined, If the sum of the min-content is greater than the width of the Flex container, the content overflow behaves like white-space: NowRAP. If the sum of min-content is greater than the width of the Flex container, the content overflow behaves like white-space:nowrap. , natural content overflow.

Children loooooooooooooooooooooooooooooooooooong is equal to the length of the item the width of the box, in this case Text no overflow, overflow – wrap: break – word; It doesn’t work at all. If you want overflow-wrap: break-word; It works by narrowing the width of the subterm.

How do I narrow it? According to the above mentioned:

If the sum of the min-content min widths of flex children is less than the flex container width:

  • Default for flex subitemsfit-contentIf the sum of the widths is greater than the width of the Flex container, the flex child widths shrink to fill the Flex container without overflow.

Just make sure that the min-content of the child is smaller than the flex container width, and simply add CSS:

#parent-flex > div{
    min-width: 0;
}
Copy the code

The min-content of the two children is now zero, which is less than the flex container width. The sum of the fit-Content width of the children is greater than the Flex container width. The flex child width shrinks to fill the Flex container without overflow.

As a result, the subitem is shortened, and the long text overflow-wrap; It works.

Display: Flex layout tutorial, nowrap, nowrap, nowrap, Nowrap, Nowrap, Nowrap

conclusion

When long text overflows and we want to show a line break, we think overflow-wrap: break-word; Flex-wrap: nowrap; flex-wrap: nowrap; Because the subitem is stretched by min-content, the longest text of the subitem is the same width as the subitem, and there is no overflow phenomenon. The solution is to reduce the width of the subitem to generate overflow phenomenon, so min-width=0.