Narrowing the width of a line-broken <h1> heading

Question

Narrowing the width of a line-broken <h1> heading

I have encountered a problem that can be best described with two images provided below.

Let's focus on the relevant CSS snippet:

h1 {
    display: inline-block;
    background-color: pink;
}

The first example shows an <h1> tag with a short title that does not wrap. The background color of the tag only extends up to the width of the text it contains. This is the desired appearance for all titles.

In contrast, in the second image, the text has wrapped, causing the tag's width to be 100% of the container instead of just the text width itself. Even though the text almost fills the container, there is still some extra space present.

My main inquiry is understanding the mechanism behind this behavior. Does wrapped text always result in width: 100%;? Are there any workarounds to avoid this limitation?

You can see the same issue demonstrated in this example fiddle.

Your insights are greatly appreciated. Thank you!

html css

Answer 1

Answer №1

You may consider modifying your css as follows:

h1 {
    display: inline;
    background-color: pink;
}

Check out this JSFiddle for reference

After the changes, it will now appear like this:

Note: If you are not a fan of the display:inline approach, an alternative is to enclose your text within a span element and apply the background color to that element instead.

For example:

h1 {
  display: inline-block;
}

span {
  background-color: red;
}

<div class="container">
  <h1><span>Mine eyes have seen the glory of the coming of the lord</span>
  </h1>
  <h1><span>frog</span></h1>
</div>

Here's Your Updated JSFiddle link

Answer 2

You may consider modifying your css as follows:

h1 {
    display: inline;
    background-color: pink;
}

Check out this JSFiddle for reference

After the changes, it will now appear like this:

Note: If you are not a fan of the display:inline approach, an alternative is to enclose your text within a span element and apply the background color to that element instead.

For example:

h1 {
  display: inline-block;
}

span {
  background-color: red;
}

<div class="container">
  <h1><span>Mine eyes have seen the glory of the coming of the lord</span>
  </h1>
  <h1><span>frog</span></h1>
</div>

Here's Your Updated JSFiddle link

Narrowing the width of a line-broken <h1> heading

Answer №1

Similar questions

The navigation menu links that are meant to stay fixed at the top of the page are not functioning

Using the `ng-repeat` directive as an argument in a Javascript function

Spin the text within a div by 90 degrees and align it to the right side

What steps can I take to ensure my radio button functions according to my specified conditions?

Eclipse Content Assist feature appears to be malfunctioning as it fails to display

Customizing CSS for Various Browser Sizes

Transition the object in smoothly after the slide has changed

Is it possible to implement a custom radio tab index without using JavaScript

Insert JavaScript into this HTML document

Transferring Data through the POST Method

Can you explain the intended function of .reference in the CSS code provided?

What are some other options to using position: absolute when working within an inline position:relative?

How to style font display in PHP Select Menu with two different font sizes

Overlaying images with non-rectangular shapes

How do three buttons display identical content?

Step by step guide on incorporating two background images in a single header

Starting a div programmatically and then running into trouble when trying to close it, an error was encountered with an end tag for "div" without a corresponding start tag

Is there a way for me to modify the color of the font?

Is AJAX malfunctioning while the success function is functioning properly?

Angular 2 Form Error: Control Not Found