1

1 Summary

<div> and <span> elements¹ with an assigned max-width property seem to always consume the maximum width if there's an implicit line break, even if they may not typographically require it. Is there a pure HTML/CSS way for them to not consume the entire max-width in these cases?

I make some comments on whether this could be a duplicate question in section 5.

2 Context / Problem Demonstration

I have the following minimum example to highlight the problem:

div {
  display: inline-block;
  max-width: 200px;
  border: 1px black solid;
}
<div style="width: 200px">200px width reference</div><br />
<br />
<div>Case 1: abc def ghi</div><br />
<div>Case 2: abc def ghi jkl mno pqr stu</div><br />
<!-- Problematic case! -->
<div>Case 3: abc def ghi jkl mno<br />pqr stu</div><br />

Here in JS Fiddle. Here as a rendered image in Gecko.

Description²:

  • Case 1 (okay): The div-box only grows to 127 px in width, as expected.
  • Case 2 (problematic): The div-box seems to take the full width of 200 px, even though – due to the implicit line break – this seems unnecessary. It has the same effect as introducing superfluous right-padding.
  • Case 3 (okay): When inserting the line break explicitly through a <br> element, the max-width seems to calculate properly and the element takes a width of 180 px.

3 Questions

My questions are:

  1. Is it possible to have a <div> only consume the typographically required width against a provided max-width in pure HTML/CSS without having to place a <br> line break explicitly?
  2. Differently phrased, is it possible for a <div> element to take the same width against a provided max-width regardless of whether the line break is implicit or explicit (through <br>)?
  3. Or… is there something in the HTML/CSS standard that dictates that this is exactly the defined behaviour?

4 The Objective

We're planning to use HTML elements such as these with text-align: center in design elements with a maximum width. Their contents will be variable. For layout & design reasons, the left/right-paddings should be 0 px. Due to the effect above however, the <div> elements always introduce artificial left/right-paddings when an implicit line break occurs.

5 Duplicate?

I would say this isn't a strict duplicate of Stackoverflow 14596213: Shrink DIV to text that's wrapped to its max-width?, because I'm looking for pure HTML/CSS solutions.

I would also say that this isn't a duplicate of Stackoverflow 67305201: Span ocupies whole div after line break [duplicate], because this question was closed, and the referred answers concern themselves with parent containers, which are absent in my example.

¹ And many others, I'm just using <div> and <span> elements as representatives.

² In the description, I'm using the exactly calculated widths as they appear on my system. The exact values could differ on other systems. They should not matter, I only list them for demonstrative purposes.

depperm
  • 10,606
  • 4
  • 43
  • 67
Zealotus
  • 11
  • 1
  • 1
    short answer: you cannot do this with CSS, don't try to find a solution (believe me) – Temani Afif Oct 25 '21 at 14:18
  • First of all it's not very clear what you want to achieve. You have `display: inline-block; max-width: 200px;` for all divs. This means all divs will be displayed as inline block (not full width) and maximum of 200px. You could use `span` for that. – Azu Oct 25 '21 at 14:25
  • @Azu: Yes, correct, it doesn't matter whether ```div``` or ```span``` elements are used in this question. It applies to them equally. (as long as ```display: inline-block``` is being used) The question concerns itself with the semantics of ```max-width```. Case 2 and case 3 arguably display exactly the same content, but they take different widths. – Zealotus Oct 25 '21 at 14:29
  • Both divs (Case 2 and Case 3) have `max-width: 200px`, however you use `br` inside Case 3, that's why the text goes on the second line. The max-width is still 200px. It works as expected. – Azu Oct 25 '21 at 14:35
  • @Azu: Correct. Case 2 has an implicit line break (introduced by the ```max-width```), while case 3 has an explicit line break (introduced by the ```
    ``` element). The end result is that they display exactly the same content. However case 2 has a 200 px width, case 3 has a 180 px width. From a typesetting and semantic perspective, it is not necessary for case 2 to consume the additional 20 px and introduce “artificial padding”, yet it does. (Why would it consume the max-width, when 180 px are enough, as demonstrated when placing the explicit ```
    ```?)     – Zealotus Oct 25 '21 at 14:41
  • The content is not the same at all. In case 3 you have a line break. Care 2 is 200px, Case 3 is 165px. Take a look at the Dev Tools. – Azu Oct 25 '21 at 14:47
  • @Azu: Yeah, that's exactly the point. Why does case 2 take 200 px, when *clearly* 165 px are sufficient? (or 180 px, as in my OS / browser) Why consume the extra 35 px in case 2? – Zealotus Oct 25 '21 at 14:50
  • Okay:) Once again. You can ignore all `br` after the divs. They don't play any role here. So we have Case 2, which is 200px (as declared) and another Case 3, where the content is less because of the line break. It doesn't take extra space, but less space than 200px. – Azu Oct 25 '21 at 14:55

0 Answers0