Example of using the CSS property white-space with break-spaces

Question

Example of using the CSS property white-space with break-spaces

I've been searching for an example of using css white-space: break-spaces for hours with no luck. Most tutorials only cover examples for normal, nowrap, pre, pre-wrap, pre-line. When it comes to break-spaces, the information available is limited to quotes like the one below 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).

Can someone provide me with examples to illustrate the differences between break-spaces and pre-wrap?

css whitespace

Answer 1

Answer №1

This illustration provides a clearer demonstration of how the trailing white space does not wrap with the pre-wrap property.

.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 applied.
  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>

Answer 2

This illustration provides a clearer demonstration of how the trailing white space does not wrap with the pre-wrap property.

.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 applied.
  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>

Example of using the CSS property white-space with break-spaces

Answer №1

Similar questions

Eliminating the Scrollbar from Bootstrap 4 DataTable Causes Table Width to Decrease

How can you position an image overlay with multiple text elements using the 'align-items-end' property, all within a block layout?

A HTML table featuring a horizontal scroll and cells with a fixed width for optimal visibility

Combining divs with identical values in Angular

What would be the best way to display a label once the zoom level exceeds a certain threshold in Leaflet?

IE6 disrupts stored layouts

How can two unique links toggle the visibility of divs with two specific IDs?

Display or conceal a division underneath a dropdown menu based on selections retrieved from a SQL Server database

Ways to conceal specific content within a text using CSS

Concealed Sub Menus Within a Vertical Navigation Bar

Enhance jQuery for a dynamic navigation dropdown with multiple sub-menus

The menu bar becomes distorted when the page is zoomed out

What is preventing the conditional class in Svelte from being applied when the page loads?

Creating Consistent Button Padding in Material UI

The cascading style sheet used by a lightbox

I'm working on creating a login page with Bootstrap. Does anyone know the best way to center it on the screen

Activate the CSS on a click event using the onClick method

As I continue to fill the child DIV element with more text, the shrink wrap is compromised and eventually breaks

In PHP, the use of ul, li, class, and

Maintain the fixed position of the Google Map <div> while allowing background <div>s to scroll