CSS Property white-space example for break-spaces

user_1103043 0
Viewed 4917

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?

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

user_3917150
Related