I’m trying to configure a <pre> element so that it will wrap long lines mid-word if it has to, but will also reduce size the element itself to the width of the longest line if that’s less than the page width.
I’ve figured out how to do either one of these things, but I can’t find a way to make them play nice together.
The use case for this is I’m trying to build a pretty error page for a web application which will include the raw stack trace pretty-printed in a <pre> element, but I want it to correctly handle if a very long string with no white space is included in the stack trace.
For getting mid-word wrap to work I was able to do that using the CSS declarations word-break: break-all; and white-space: break-spaces;. Separately, I could get the <pre> element itself to shrink down to the line width using the declaration width: min-content;. However when I apply both to the same <pre> block it will shrink the block down to fit a single character.
This behavior does makes sense to me given what these declarations are supposed to do, but if there is an alternative way to accomplish this that meets both goals then I am unable to figure out what it is.
Anybody have any suggestions on what I should use instead to get the desired results? Sample code below.
And yes, this minimal HTML does validate as-is on https://validator.w3.org/ without any warnings, why do you ask? 😛
<!DOCTYPE html>
<html lang="en">
<title>Preformat Demo</title>
<style>
pre {
background-color: silver;
border-radius: 1em;
padding: 2em;
}
.wrap {
max-width: 3em;
white-space: break-spaces;
word-break: break-all;
}
.shrink {
width: min-content;
}
</style>
<h3 class="caption">none</h3>
<pre>0123456789</pre>
<h3 class="caption">wrap</h3>
<pre class="wrap">0123456789</pre>
<h3 class="caption">shrink</h3>
<pre class="shrink">0123456789</pre>
<h3 class="caption">both</h3>
<pre class="shrink wrap">0123456789</pre>