CSS white-space: nowrap; not respecting max-width

Question

CSS white-space: nowrap; not respecting max-width

Reproduce:

Run the below code

White-space is causing this issue where it increase the width of the right container and igroring the max-width of parent container

Current result: Width of right excees the max- width: 1680px;

Expected Result : Width should not exceed max-width: 1680px;

<!DOCTYPE html>
<html>

<head>
    <title>test application</title>
    <style>
        body {
            background-color: red;
        }
        
       div{
          box-sizing: border-box;
         }


        .container {
            align-items: stretch;
            max-width: 1680px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: flex-start;
        }

        .container .left {
            background-color: blue;
            display: flex;
            width: 18em;
            padding: 3em 2em 3em 2em;
            position: relative;
            color: white;
            flex-direction: column;
            margin-right: 2em;
            min-height: calc(100vh - 150px);
            flex-grow: 0;
            flex-shrink: 0;
        }

        .container .right {
            background-color: green;
            width: 100%;
            padding: 0em 3em 3em 3em;
            flex: 1
        }


        .b2 {
            width: auto;
            white-space: nowrap;
            overflow: hidden;
        }

        .abc {
            display: inline-flex;
            /* width: 1640px; */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">left </div>
        <div class="right">
            <div class="b2">
                <div class="abc">
                    rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
                </div>
                <div class="abc">
                    rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
                </div>
            </div>
        </div>
    </div>
</body>

</html>

F. Müller · Accepted Answer · 2022-11-17T06:30:16.043

The white-spacing relies on white-spaces to break the text apart. Since you don't have any, the text will not break onto the new line.

There are multiple ways to deal with this.

For example you could set overflow-wrap: anywhere and word-wrap: normal to the .abc selector. But this will also break whole-words apart ignoring standard syllable-based word wrapping.

You could also cut out the excess by forcefully setting overflow: hidden, white-space: nowrap together with a max-width and maybe text-overflow: ellipsis. But this will actually hide the information.

Caveat: The overflow-wrap: anywhere is unfortunately not supported by Safari.

It depends on what you want to achieve.

Example with 'overflow-wrap: anywhere'

<!DOCTYPE html>
<html>

<head>
  <title>test application</title>
  <style>
    body {
      background-color: red;
    }
    
    div {
      box-sizing: border-box;
    }
    
    .container {
      align-items: stretch;
      max-width: 1680px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: flex-start;
    }
    
    .container .left {
      background-color: blue;
      display: flex;
      width: 18em;
      padding: 3em 2em 3em 2em;
      position: relative;
      color: white;
      flex-direction: column;
      margin-right: 2em;
      min-height: calc(100vh - 150px);
      flex-grow: 0;
      flex-shrink: 0;
    }
    
    .container .right {
      background-color: green;
      width: 100%;
      padding: 0em 3em 3em 3em;
      flex: 1
    }
    
    .b2 {
      width: auto;
      white-space: nowrap;
      overflow: hidden;
    }
    
    .abc {
      display: inline-flex;
      overflow-wrap: anywhere;
      white-space: normal;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">left </div>
    <div class="right">
      <div class="b2">
        <div class="abc">
          rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
        </div>
        <div class="abc">
          rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Example with 'text-overflow: ellipsis'

<!DOCTYPE html>
<html>

<head>
  <title>test application</title>
  <style>
    body {
      background-color: red;
    }
    
    div {
      box-sizing: border-box;
    }
    
    .container {
      align-items: stretch;
      max-width: 1680px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: flex-start;
    }
    
    .container .left {
      background-color: blue;
      display: flex;
      width: 18em;
      padding: 3em 2em 3em 2em;
      position: relative;
      color: white;
      flex-direction: column;
      margin-right: 2em;
      min-height: calc(100vh - 150px);
      flex-grow: 0;
      flex-shrink: 0;
    }
    
    .container .right {
      background-color: green;
      width: 100%;
      padding: 0em 3em 3em 3em;
      flex: 1
    }
    
    .b2 {
      width: auto;
      white-space: nowrap;
      overflow: hidden;
    }
    
    .abc {
      display: block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      max-width: 100ch;
      /* 100 characters max */
      max-width: 1000px;
      /* 1000px max */
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">left </div>
    <div class="right">
      <div class="b2">
        <div class="abc">
          rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
        </div>
        <div class="abc">
          rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS white-space: nowrap; not respecting max-width

1 Answers1