Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Property white-space example for break-spaces

Tags:

css

whitespace

I am finding css white-space: break-spaces example. I googled for 1 hours. Not found example yet! Most tutorials show exmaple for normal, nowrap, pre, pre-wrap, pre-line. For break-spaces people show like below quote from mozilla

The behavior is identical to that of pre-wrap, except that:

  • Any sequence of preserved white space always takes up space, including at the end of the line.
  • A line breaking opportunity exists after every preserved white space character, including between white space characters.
  • Such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes (min-content size and max-content size).

Could anyone show me example differences between break-spaces and pre-wrap?

like image 246
friday Avatar asked Jan 26 '26 08:01

friday


1 Answers

This example should make it a bit more clear showing how the trailing white space won't wrap with pre-wrap

.break-spaces {
  white-space: break-spaces;
}

.pre-wrap {
  white-space: pre-wrap;
}

div {
  background: #f3f3f3;
  width: 150px;
}

span {
  background: #ccc;
}
<div class="break-spaces">
  <span>This is a test where white-space: break-spaces is being used.
  Trailing white space will wrap                                                        
  
  Test</span>
</div>

<div class="pre-wrap">
  <span>This is a test where white-space: pre-wrap is being used.
  Trailing white space will not wrap                                                    
  
  Test</span>
</div>
like image 101
abney317 Avatar answered Jan 28 '26 21:01

abney317



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!