Providing space for a two-line title

Question

Providing space for a two-line title

It's a bit tricky to explain, so if anyone has a better title in mind, feel free to change it.

I'm trying to create a black box behind my headline. I'm using a span inside the h-tag for this purpose, but I need to add some padding to the left and right. Since my layout is responsive, the headline might wrap onto two lines.

    <div class="headline-black">
        <h1 class="entry-title">
             <span>A very long headline that goes on and on and on.</span>
        </h1>
    </div>


h1 span {
    background: none repeat scroll 0 0 #000000;
    line-height:44px;
    padding:7px 25px 8px 25px;
}

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
}

The issue: The padding only applies to the beginning and end of the span. When the headline wraps onto two lines, the letters touch the border of the box.

I hope this explanation makes sense. Here's the fiddle. Try resizing the window to see how it behaves.

http://jsfiddle.net/832u8/2/

Edit: I want the box to conform to the text, as if highlighted with a marker. But I need padding for each line.

css padding html

Answer 1

Answer №1

Do you intend for it to split into "two dark lines" like that? If your goal is simply to have a black background for your titles while keeping the padding, you can achieve this with the following simplified version:

<h1 class="entry-title">A lengthy headline that stretches on and on.</h1>

h1 {
  background: #000;
  line-height:33px;
  padding: 8px 25px;
  color: #fff
}

Check out the updated Fiddle here: http://jsfiddle.net/kWgD2/

Answer 2

Do you intend for it to split into "two dark lines" like that? If your goal is simply to have a black background for your titles while keeping the padding, you can achieve this with the following simplified version:

<h1 class="entry-title">A lengthy headline that stretches on and on.</h1>

h1 {
  background: #000;
  line-height:33px;
  padding: 8px 25px;
  color: #fff
}

Check out the updated Fiddle here: http://jsfiddle.net/kWgD2/

Answer 3

Answer №2

This solution may not be perfect, but it's a bit hacky. You might need some JavaScript to improve it further.

Here's the code snippet:

<h1 class="entry-title"><span id="Title"><span>Some incredibly lengthy headline that goes on for quite a while.</span></span></h1>


#Title {
 border-left: 20px solid #000;
 display:block;
 color: #fff;
}

#Title:after {
 content:'';
 display:inline-block;
 width: 20px;
 background: #000;
}

#Title span {
 background: #000;
 padding-right: 20px;
 direction: rtl;
}

http://jsfiddle.net/8EDPN/

Answer 4

This solution may not be perfect, but it's a bit hacky. You might need some JavaScript to improve it further.

Here's the code snippet:

<h1 class="entry-title"><span id="Title"><span>Some incredibly lengthy headline that goes on for quite a while.</span></span></h1>


#Title {
 border-left: 20px solid #000;
 display:block;
 color: #fff;
}

#Title:after {
 content:'';
 display:inline-block;
 width: 20px;
 background: #000;
}

#Title span {
 background: #000;
 padding-right: 20px;
 direction: rtl;
}

http://jsfiddle.net/8EDPN/

Answer 5

Answer №3

Have you considered using position:relative along with a left adjustment? It may not be the most efficient method if the adjustments are manual, but it does provide a css-only solution, which could be helpful.

Here's an example -> http://jsfiddle.net/JnLje/358/

For more information from thirtydot -> Add padding at the beginning and end of each line of text

Answer 6

Have you considered using position:relative along with a left adjustment? It may not be the most efficient method if the adjustments are manual, but it does provide a css-only solution, which could be helpful.

Here's an example -> http://jsfiddle.net/JnLje/358/

For more information from thirtydot -> Add padding at the beginning and end of each line of text

Answer 7

Answer №4

To improve the design, consider adding padding to the h1 tag and/or setting the span element as inline-block. Check out this example on jsFiddle (span inline-block)

 h1 span {
        background: none repeat scroll 0 0 #000000;
        line-height:44px;
        padding:7px 25px 8px 25px;
        display:inline-block;
    }

Another example on jsFiddle (padding h1)

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
    padding:0 1em;
}

Answer 8

To improve the design, consider adding padding to the h1 tag and/or setting the span element as inline-block. Check out this example on jsFiddle (span inline-block)

 h1 span {
        background: none repeat scroll 0 0 #000000;
        line-height:44px;
        padding:7px 25px 8px 25px;
        display:inline-block;
    }

Another example on jsFiddle (padding h1)

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
    padding:0 1em;
}

Answer 9

Answer №5

I stumbled upon a different solution recently. This solution is compatible with most browsers (excluding IE8 and earlier versions), easy to customize, and has the following appearance:

HTML

<h1>
    <span class="wrap">
        <span class="inner">Dynamic HTML text over multiple lines with a well-following background and margins around.</span>
    </span>
</h1>

CSS

h1 {
    color:#fff;
}

.wrap {
    box-shadow: -10px 0 0 10px #000, 10px 0 0 10px #000;
}

.inner {
    background: #000;
    position:relative;
}

Answer 10

I stumbled upon a different solution recently. This solution is compatible with most browsers (excluding IE8 and earlier versions), easy to customize, and has the following appearance:

HTML

<h1>
    <span class="wrap">
        <span class="inner">Dynamic HTML text over multiple lines with a well-following background and margins around.</span>
    </span>
</h1>

CSS

h1 {
    color:#fff;
}

.wrap {
    box-shadow: -10px 0 0 10px #000, 10px 0 0 10px #000;
}

.inner {
    background: #000;
    position:relative;
}

Providing space for a two-line title

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Answer for background picture when reducing magnification

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Embed a hyperlink within an informational passage

Is there a way to maintain scroll position on a dynamically refreshing div?

Are you attempting to retrieve the most up-to-date trading price of a stock with Python?

the combination of class and type functions as a jquery selector

The MP4 video file is not compatible with the HTML5 video player on Internet Explorer because of encoding issues

Send the selected dropdown value to two separate PHP pages without using JavaScript

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

The POST request is coming back as null, even though it includes both the name and

Using values from an appsettings.json file as href variables in an AMP html: a complete guide

The JavaScript code appears to be missing or failing to execute on the website

Issue with DIV height in Internet Explorer occurs only when application is accessed using server name

Converting JSON data into HTML format

Utilizing the entire right side of a browser window, the Bootstrap carousel is displayed in full view

applying conditional rendering in vue.js

What could be the reason behind the disappearance of the lines in my table that was created with the help of HTML, CSS, and JavaScript?

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

update the markers on a leafletjs map

Which programming language is best suited for this task?