3

Below is simple example illustrating the problem. I have "Stackoverflow Stackoverflow" string and in first case it is displayed as a single line and in the second case word wrap happens. As you can see in the second case width of the div element is wider than a single "Stackoverflow" word. Is there a way to get rid of this empty space on the right? Resulting element has width 200px as specified per max-width but I want element to have actual width which is enough to fit it into 200px after word wrap.

body {
    font-size: 30px;
}
      
.row {
    margin-bottom: 10px;
}
        
.text-no-wrap {
    background: yellowgreen;
    white-space: nowrap;
    display: inline-block;
}

.text-wrap {
    max-width: 200px;
    background: tomato;
    white-space: normal;
    display: inline-block;
}
<div class="row">
    <div class="text-no-wrap">Stackoverflow Stackoverflow</div>
</div>
<div class="row">
    <div class="text-wrap">Stackoverflow Stackoverflow</div>
</div>
Alex
  • 1,724
  • 13
  • 25
  • It is because parent element row is flex box and its child will take 100% of full width of parent element. It is not about your overflow-wrap issue. – Lwin Htoo Ko Jul 15 '21 at 11:32
  • @LwinHtooKo This is not true, flexbox does not stretch children by default. Beside you can see in the example that elements have their own size and are not stretched. – Alex Jul 15 '21 at 11:37
  • you are right. it is nothing to do with flex box. My apologies. As the nature of a block, it will try to get as much space as possible. It seems impossible to me. It totally depends on the width you set. You can also check "work-break: break-all". – Lwin Htoo Ko Jul 15 '21 at 17:17
  • Looks like this question is closed, but if you know how wide the browser is before it wraps, you can "hack" it by wrapping the second "Stackoverflow" with a span. Then use a media query at the right browser width to set `display:block` to the span. This will mean the elements are no longer wrapping so the whitespace is gone. – Justin Khoo Aug 31 '23 at 21:55

2 Answers2

-1

You could try adding width: max-content; to the div's insde the .row

Note that width: max-content; isn't supported in Internet Explorer, but is supported on all other browsers.

Check the support of width: max-content; here.

I've added flex-direction: column; to the .row so the children of those div's will appear underneath each other.

If you need display: flex; on the .row div, then This is the way to go. If you don't need display: flex; on the .row div, just simply remove it. And only use width: max-content; on the children;

body {
    font-size: 30px;
}
      
.row {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
        
.text-no-wrap {
    width: max-content;
    background: yellowgreen;
}

.text-wrap {
    width: max-content;
    background: tomato;
}
<div class="row">
    <div class="text-no-wrap">Stackoverflow1 Stackoverflow2</div>
</div>
<div class="row">
    <div class="text-wrap">Stackoverflow1 Stackoverflow2</div>
    <div class="text-wrap">Stackoverflow1 Stackoverflow2</div>
</div>
Thomas Tromp
  • 152
  • 9
  • In your example there is no word wrapping. You display things in single line. I have added two elements at the bottom just to make it more apparent that two word wrapped items are longer than a single line item. – Alex Jul 15 '21 at 11:41
  • You've also added max-width to those div's. It seems that display: flex; makes those div's get the full width of the max-width you've set. – Thomas Tromp Jul 15 '21 at 12:06
  • I have removed flexbox completely and edited my question to be more specific. – Alex Jul 15 '21 at 12:38
-1

I believe this one is not a text-wrap issue. If you check the following code you will get multiple spaces in between wrapping text. This one is due to the

max-width: 200px;

specified for

.text-wrap.

body {
        font-size: 30px;
    }
          
    .row {
        display: flex;
        margin-bottom: 10px;
    }
            
    .text-no-wrap {
        background: yellowgreen;
        white-space: nowrap;
    }

    .text-wrap {
        max-width: 200px;
        background: tomato;
        white-space: normal;
    }
<html>

<body>

<div class="row">
    <div class="text-no-wrap">Stackoverflow Stackoverflow</div>
</div>
<div class="row">
    <div class="text-wrap">Stackoverflow Stackoverflow testing text wrapping space issue</div>
</div>

</body>
</html>

Go through the demo you can see that after "testing text" multiple spaces is there.

ScareCrow
  • 497
  • 3
  • 6
  • This is exactly an issue with word wrap and max-width. As you pointed out resulted element width is max-width but really less space is required than 200px, so I want element to have this minimum space required to show it rather than specified max width. – Alex Jul 15 '21 at 12:37
  • Then why the multiple space after the "testing text" while running the above code. Please explain. @Aleksey – ScareCrow Jul 15 '21 at 12:45
  • @Aleksey are you able to identify the above-specified issue of multiple spaces after the "testing text"? – ScareCrow Jul 15 '21 at 13:18
  • 1
    It is default behaviour. It basically sets with to max-width when word-wrap happens. To avoid this need to set `width: min-content;` and then width would be set to the width of the longest text line instead of `max-width` – Alex Jul 15 '21 at 13:30
  • so the extra space after "stackoverflow" is also the default behavior. right? @Aleksey – ScareCrow Jul 15 '21 at 13:31
  • Yes. I found my answer here https://stackoverflow.com/questions/12377826/css-width-max-width-on-line-wrap – Alex Jul 15 '21 at 13:34
  • So that's not a text wrap issue. That was my intention to the answer specified. @Aleksey – ScareCrow Jul 15 '21 at 13:37