CSS fit-content Width

Frequently, or so it seems, I want to center a multi-line block of text. (The block is to be centered, not the individual lines of text.)

Here is an illustration block of text:

"… white with
red polka dots."
-Will Bontrager
in The Kick

The above uses CSS width:fit-content; to make the width of the p or div paragraph the width of the content.

There are other ways to make an HTML container (p and div are example containers) calculate itself to the width of the content. Like display:table or position:absolute, but I think width:fit-content; is best for free-flowing content.

To center the above illustration block of text, I specify auto for the left and right margins. It does a wonderful job.

Note: If you have an old browser or email reader, it might not support the CSS width:fit-content; definition. If that is the case, the width of the p or div or other HTML containers will not be affected by that definition.

These are the three CSS definitions that I tend to use for centering a block of text:

width:fit-content;
margin-left:auto;
margin-right:auto;

Other CSS in the illustration block of text are for the border and some padding.

Here is the code for the entire illustration block of text:

<p style="width:fit-content; 
          margin-left:auto; 
          margin-right:auto; 
          border:1px solid #ccc; 
          border-radius:.5em; 
          padding:.5em;">
"&hellip; white with
<br>red polka dots."
<br>-Will Bontrager
<br>in <i>The Kick</i>
</p>

Just like a div with no width specified, the div with CSS width:fit-content; will not expand wider than the available column width.

The CSS width:fit-content; definition, along with auto for the left and right margins, can be effective when you need to center a block of text — without affecting the justification of the text within the container.

(This content first appeared in Possibilities newsletter.)

Will Bontrager