Can I use the CSS width property on text (eg. h1, p)?

Question

I have always avoided using the CSS width property (including max-width / min-width) on text elements, such as h1, h2, h3, p etc. Instead, I will set widths on containing, block level elements (such as a div).

However, I do this out of intuition or something I once learned, but I can't find any specification as to whether this is correct or not. Am I just making this up, or is there some kind of CSS/HTML specification that lays this out?

Or, am I just confusing h1 etc with inline elements (eg. span), where width has no effect?

Can I do this:

<style>
.custom-class {
  width: 500px;
}
</style>

<h1 class="custom-class">Test</h1>

Or should I do this?

<style>
.custom-class {
  width: 500px;
}
</style>

<div class="custom-class">
  <h1>Test</h1>
</div>

what you need show exampule – BiswajitPaloi Nov 09 '21 at 06:59 — BiswajitPaloi, Nov 09 '21 at 06:59
Thanks @BiswajitPaloi - have updated the question. – Mando Nov 09 '21 at 07:12 — Mando, Nov 09 '21 at 07:12

score 3 · Answer 1 · answered Nov 09 '21 at 07:12

3

I assume you are confusing it with inline elements. I don't see a general problem with something like this:

h1 {
   background-color: orange;
   width: 400px;
   margin: 0 auto;
   text-align: center;
}

answered Nov 09 '21 at 07:12

pso

513
1
16

Thanks @pso - however, I'm looking for something more "written in stone" than just an opinion (which may or may not be right) - do you have a reference from Moz or W3 or any other standards? Eg. all valid attributes for HTML are outlined here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes - I guess I'm looking for a spec of all valid CSS that can be applied to each HTML element. – Mando Nov 09 '21 at 07:17
I'm not that knowledgable, but to me this doesn’t look any less normal than the 'background-color' just above. I'd like to know myself if there are some strange cases where you would want to avoid it :P. – pso Nov 09 '21 at 07:25
it's possible I was just getting confused with inline elements, because I know that you can use background color (for example) on an inline element, but you can't use width - it has no effect. As for strange cases, I'm probably thinking of scenarios where text overflow has unexpected results - for example, if I put a width of 10px on a really long word, the text will generally overflow, and even though the 10px width is being applied, it doesn't visually present as if it's doing anything. – Mando Nov 09 '21 at 07:30
That would happen if you applied the width on a parent div too. So I guess it's more a general problem with text overflowing. Also the background-color would visualize the width. – pso Nov 09 '21 at 07:36
Agree with you @pso. Thanks for your help on this topic! And while you did answer my question somewhat subjectively or based on intuition, I was after something documented, which is outlined below. Perhaps my question should have been clearer? – Mando Nov 09 '21 at 07:53
No problem! And it was clear enough. Have a nice day. – pso Nov 09 '21 at 07:57

score 1 · Accepted Answer · answered Nov 09 '21 at 07:41

MDN is usually a reliable reference and it says the CSS width property:

Applies to all elements but non-replaced inline elements, table rows, and row groups

See https://developer.mozilla.org/en-US/docs/Web/CSS/width

There is some interesting, if slightly out of date in some areas, discussion of the meaning of non-replaced inline elements at: https://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element#:~:text=A%20non-replaced%20element%20is%20simply%20an%20element%20that,CSS.%20The%20concept%20has%20somewhat%20changed%20over%20time.

And I think the quote from MDN would be a little clearer if the 'but' was 'except'. So we could say for example that:

width works on all elements except non-replaced inline elements for example span.

Can I use the CSS width property on text (eg. h1, p)?

2 Answers2