Hello, sorry if it is a trivial question - could somebody explain what is "pre-wrap" in humanese?

Thanks!

  • I'm splitting hairs here, but technically speaking, 'pre-wrap' is a value and 'white-space' is a property. Andy Ford almost 7 years ago

1 answer

o.k.w 2355
3
points
This was chosen as the best answer

I will try to use human-ese lingo which might not be 100% technical correct but you should get the idea.

A chunk of text in a container with white-space: normal will wrap to new line if the rendered width is wider than the container.

Setting white-space: pre takes the content within the container as pre-formatted and will only wrap upon newlines. If the container is not wide enough, it will be forced to widen or the content will be hidden or floated depending on other properties.

Setting white-space: pre-wrap takes the content within the container as pre-formatted and will wrap upon newlines AND ALSO wrap if the text width is wider than that of the container.

Try the following codes and yu will see the difference:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>white-space: comparison</title>
<style type="text/css">
  div      { outline: solid 1px red;}
  .prewrap { white-space: pre-wrap;}
  .pre     { white-space: pre;}
</style>
</head>
<body>
<div style="width: 200px;"><!-- constrain container to a fixed width -->
<div>
white-space is not styled ('normal'), one two three
Line 2
Line 3
</div>
<div class="prewrap">
white-space is styled as 'pre-wrap', one two three
Line 2
Line 3
</div>
<div class="pre">
white-space is styled as 'pre', one two three
Line 2
Line 3
</div>
</div>
</body>
</html>

Screenshot taken off Safari

Answered almost 7 years ago by o.k.w