4

This should explain what I mean: https://jsfiddle.net/cucocreative/5w1nmeoq/13/

when the h1 wraps onto 2 lines the container doesn't reduce in size as expected. As you can see (after reducing the width of the browser) when it wraps onto 2 lines, after the last word on line 1 there is a gap - in image below marked in red

code sample to demonstrate the issue:

body {
  margin: 0;
  padding: 0;
}

.tagline {
  margin: 0;
  width: fit-content;
  margin-right: 10px;
}

.blackBlock {
  background-color: #000;
  padding: 20px 40px;
  margin: 0;
}

h1 {
  color: #fff;
  background-color: pink;
}
<div class="tagline">
  <div class="blackBlock">
    <h1>Porta Ridiculus Elit Lorem</h1>
  </div>
</div>

enter image description here

how do i get it so it does this instead?

enter image description here

So as width:min-content does it - but without the side-effect of it reducing the width down the longest word.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
CuCo
  • 87
  • 9
  • Also for future reference, please note that questions should be self-contained and include all the relevant code directly, as external links can break or change over time and make the question invalid and unhelpful to future users. You can see [how to create a runnable stack snippet here](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) – FluffyKitten Oct 07 '20 at 12:07
  • 1
    @Paulie_d : **none** of the duplicate solves the problem of the gap on the first line when text wraps. – G-Cyrillus Oct 07 '20 at 12:24
  • 1
    @FluffyKitten : **none** of the duplicate solves the problem of the gap on the first line when text wraps. do you have a better duplicate to propose, i did not find any accurate myself ;) – G-Cyrillus Oct 07 '20 at 12:25
  • Maybe this is a better dupe even though its about elements, but the answer gives a better explanation: https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap - basically this isn't possible through CSS only for the reasons explained in the answer there :) – FluffyKitten Oct 07 '20 at 23:08
  • So an element (in this instance a h1) is sometimes unable to to calculate it's own width when it involves wrapped text. Even when using width:fit-content it can't calculate it's content because of the text wrap. It's odd that min-content and max-content are able to get around this but fit-content has issues. Obviously I can bodge it with media queries to reduce the width of the h1 down as the browser narrows. I was just hoping for a more elegant / more consistant css solution. – CuCo Oct 08 '20 at 08:05

0 Answers0