Create a stylish block element with vertical gaps between each line, extending to full width except for the final line

Question

Create a stylish block element with vertical gaps between each line, extending to full width except for the final line

Is there a way to create a title like this: https://i.sstatic.net/iSw34.png

I've experimented with various options on https://jsfiddle.net/hx4m9kfa/, but using display: inline-block; is not working, nor is display: block or anything involving width: 100%.

h1, h2, h3 {
  background-color: orange;
  margin: 0 0 10px 0;
  font-size: 2em;
}
h2 {
  display: inline-block;
  background-color: green;
}

h3 {
  background-color: purple;
}

<h1>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod 
</h1>
<h2>
Lorem ipsum dolor sit amet, conset 
</h2>
<h2>
etur sadipscing elitr, sed diam nonumy eirmod  
</h2>
<h2>
nonumy eirmod 
</h2>

<h3>
Lorem ipsum dolor sit amet, conset 
</h3>
<h3>
etur sadipscing elitr, sed diam nonumy eirmod  
</h3>
<h3>
nonumy eirmod 
</h3>

Is it possible to have the entire title enclosed in just one tag (without needing JavaScript)? Any solution that achieves the desired result would be greatly appreciated. Can anyone offer guidance on how to achieve this? Thank you!

html css

Answer 1

Answer №1

div {
  text-align:justify
}

h1 {
    color:#fff;
    background: #888888;    
    line-height: 1.3em;
    display:inline;
    -webkit-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -moz-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -ms-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -o-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;   
}

<div>
    <h1>
    Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam   nonumy eirmod lorem ipsum dolor sit amet
    </h1>
</div>

Answer 2

div {
  text-align:justify
}

h1 {
    color:#fff;
    background: #888888;    
    line-height: 1.3em;
    display:inline;
    -webkit-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -moz-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -ms-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -o-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;   
}

<div>
    <h1>
    Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam   nonumy eirmod lorem ipsum dolor sit amet
    </h1>
</div>

Answer 3

Answer №2

If you're looking for a solution that involves using JS or a CDN, then I've got just the thing for you.

Exploring Options

Trying to achieve this without additional divs or relying solely on CSS might prove to be quite challenging [or rather, impossible]. This is because when a browser encounters a h2 tag breaking up due to word wrap, it still perceives it as one unit and not individual lines. Unless you want to write your own JavaScript code, there's a convenient free CDN known as Lining.JS which adds a class .line to each line within your paragraph, enabling you to style every line separately.

A Possible Fix

Let's kick things off with my sample HTML setup:

<!-- Utilize Lining.JS via CDN -->
<script src="//cdn.jsdelivr.net/lining.js/0.3.2/lining.min.js"></script>

<!-- 'data-lining' serves as the reference for Lining.JS -->
<h2 data-lining>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod 
</h2>

Below is the CSS snippet I implemented for demonstration purposes. You may need to adjust the width based on your requirements, but everything else should fall into place smoothly.

/* Divides h2 into separate lines by utilizing clip */
h2{
    text-overflow: clip;
    width: 400px;
    white-space: normal;
    overflow: hidden;
    padding: 5px 0;
    color: #444341;
    line-height: 1.2;
}

/* Target all '.line' classes generated through JS */
h2 .line{
  background: #00FFCC;
  margin:10px;
}

/* Target the last line class (modify width as needed for total width) */
h2 .line[last]{
  display: inline-block;
  margin-top: 0;
}

Feel free to check out my implementation on JS Fiddle Here. Hopefully, this solution proves beneficial for your needs!

Answer 4

If you're looking for a solution that involves using JS or a CDN, then I've got just the thing for you.

Exploring Options

Trying to achieve this without additional divs or relying solely on CSS might prove to be quite challenging [or rather, impossible]. This is because when a browser encounters a h2 tag breaking up due to word wrap, it still perceives it as one unit and not individual lines. Unless you want to write your own JavaScript code, there's a convenient free CDN known as Lining.JS which adds a class .line to each line within your paragraph, enabling you to style every line separately.

A Possible Fix

Let's kick things off with my sample HTML setup:

<!-- Utilize Lining.JS via CDN -->
<script src="//cdn.jsdelivr.net/lining.js/0.3.2/lining.min.js"></script>

<!-- 'data-lining' serves as the reference for Lining.JS -->
<h2 data-lining>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod 
</h2>

Below is the CSS snippet I implemented for demonstration purposes. You may need to adjust the width based on your requirements, but everything else should fall into place smoothly.

/* Divides h2 into separate lines by utilizing clip */
h2{
    text-overflow: clip;
    width: 400px;
    white-space: normal;
    overflow: hidden;
    padding: 5px 0;
    color: #444341;
    line-height: 1.2;
}

/* Target all '.line' classes generated through JS */
h2 .line{
  background: #00FFCC;
  margin:10px;
}

/* Target the last line class (modify width as needed for total width) */
h2 .line[last]{
  display: inline-block;
  margin-top: 0;
}

Feel free to check out my implementation on JS Fiddle Here. Hopefully, this solution proves beneficial for your needs!

Answer 5

Answer №3

To enhance the appearance of your text, I have enclosed it within a <span> element. This modification partially achieves the desired effect. You can view the results by clicking on this link (the h2) https://jsfiddle.net/hx4m9kfa/3/.

h2 {
  background: transparent;
  display: inline-block;
  min-width: 100%;
  line-height: 2em;
}

h2 span {
  background: green;
}

The addition of the span element introduces a background color, and adjusting the line height ensures appropriate spacing between lines. Although full width is not achieved for each line except the last one. Nevertheless, I trust this improvement will be beneficial!

Answer 6

To enhance the appearance of your text, I have enclosed it within a <span> element. This modification partially achieves the desired effect. You can view the results by clicking on this link (the h2) https://jsfiddle.net/hx4m9kfa/3/.

h2 {
  background: transparent;
  display: inline-block;
  min-width: 100%;
  line-height: 2em;
}

h2 span {
  background: green;
}

The addition of the span element introduces a background color, and adjusting the line height ensures appropriate spacing between lines. Although full width is not achieved for each line except the last one. Nevertheless, I trust this improvement will be beneficial!

Answer 7

Answer №4

If you are aware of the background-color of the page, there are certain tricks you can use.

Firstly, implement a

background-image: repeating-linear-gradient();

on each heading. This will create the desired "spacing" between each line by superimposing the background-color with repeating horizontal lines. It may be necessary to adjust the stops based on varying line-heights.

For preventing the last line of each heading from extending to full width, utilize a pseudo-element. Add position: relative; to the heading, then absolutely position the :after element with only bottom: 0; set. This will keep it within the flow and ensure it stays at the end of the final line. Set width: 100%; for sufficient width coverage and adjust its height to accommodate the heading's line-height. Apply overflow: hidden; to the heading to prevent the pseudo-element from overflowing.

Once again, the limitation here is that knowledge of the background-color of the page or where the headings reside is crucial.

h1, h2, h3 {
  position: relative;
  overflow: hidden;
  padding: 0 0.5em;
    font-size: 2em;
    line-height: 1.5;
  background-color: orange;
  background-image: repeating-linear-gradient(#FFF 0, #fff 0.2em, transparent 0.2em, transparent 1.5em);
}

h2 {
  font-size: 1.5em;
    line-height: 1.8;
  background-color: green;
  background-image: repeating-linear-gradient(#FFF 0, #fff 0.2em, transparent 0.2em, transparent 1.8em);
}

h3 {
  font-size: 2.5em;
    line-height: 1.3;
  background-color: purple;
  background-image: repeating-linear-gradient(#FFF 0, #fff 0.2em, transparent 0.2em, transparent 1.3em);
}

h1:after,
h2:after,
h3:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1.5em;
    margin-left: 0.5em;
    background-color: #FFF;
}

h2:after {
    height: 1.8em;
}

h3:after {
    height: 1.3em;
}

<h1>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod
</h1>

<h2>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod nonumy eirmod 
</h2>

<h3>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod nonumy eirmod 
</h3>

Answer 8

If you are aware of the background-color of the page, there are certain tricks you can use.

Firstly, implement a

background-image: repeating-linear-gradient();

on each heading. This will create the desired "spacing" between each line by superimposing the background-color with repeating horizontal lines. It may be necessary to adjust the stops based on varying line-heights.

For preventing the last line of each heading from extending to full width, utilize a pseudo-element. Add position: relative; to the heading, then absolutely position the :after element with only bottom: 0; set. This will keep it within the flow and ensure it stays at the end of the final line. Set width: 100%; for sufficient width coverage and adjust its height to accommodate the heading's line-height. Apply overflow: hidden; to the heading to prevent the pseudo-element from overflowing.

Once again, the limitation here is that knowledge of the background-color of the page or where the headings reside is crucial.

h1, h2, h3 {
  position: relative;
  overflow: hidden;
  padding: 0 0.5em;
    font-size: 2em;
    line-height: 1.5;
  background-color: orange;
  background-image: repeating-linear-gradient(#FFF 0, #fff 0.2em, transparent 0.2em, transparent 1.5em);
}

h2 {
  font-size: 1.5em;
    line-height: 1.8;
  background-color: green;
  background-image: repeating-linear-gradient(#FFF 0, #fff 0.2em, transparent 0.2em, transparent 1.8em);
}

h3 {
  font-size: 2.5em;
    line-height: 1.3;
  background-color: purple;
  background-image: repeating-linear-gradient(#FFF 0, #fff 0.2em, transparent 0.2em, transparent 1.3em);
}

h1:after,
h2:after,
h3:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1.5em;
    margin-left: 0.5em;
    background-color: #FFF;
}

h2:after {
    height: 1.8em;
}

h3:after {
    height: 1.3em;
}

<h1>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod
</h1>

<h2>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod nonumy eirmod 
</h2>

<h3>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod nonumy eirmod 
</h3>

Answer 9

Answer №5

A solution using only CSS, but limited in flexibility. It involves adding multiple shadows to the pseudo element ::after of an inner span (as many shadows as the maximum number of lines expected) and applying overflow: hidden to the container.

Unfortunately, this method may not work well for large blocks of text.

body {
  background: repeating-linear-gradient(45deg, cyan 0, cyan 10px, yellow 10px, yellow 20px);
  }
h2 {
  overflow: hidden;
  position: relative;
  padding: 0 10px;
  line-height: 1.5;
  color: #fff;
  font-family: arial;
  }
  h2 span {
    padding: 2px 0 2px 0 ;
    }
    h2 span::after {
      content: ".";
      position: absolute;
      width: 9950px;
      margin-left: -9900px;
      margin-right: -50px;
      bottom: .1em;
      z-index: -1;
      line-height: 1.3;
      color: blue;
      background: blue;
      box-shadow:
        5000px -1.5em 0 blue,
        5000px -3em 0 blue,
        5000px -4.5em 0 blue,
        5000px -6em 0 blue,
        5000px -7.5em 0 blue,
        5000px -9em 0 blue,
        5000px -10.5em 0 blue,
        5000px -12em 0 blue,
        5000px -13.5em 0 blue;
      }

<h2>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</span>
</h2>

Answer 10

A solution using only CSS, but limited in flexibility. It involves adding multiple shadows to the pseudo element ::after of an inner span (as many shadows as the maximum number of lines expected) and applying overflow: hidden to the container.

Unfortunately, this method may not work well for large blocks of text.

body {
  background: repeating-linear-gradient(45deg, cyan 0, cyan 10px, yellow 10px, yellow 20px);
  }
h2 {
  overflow: hidden;
  position: relative;
  padding: 0 10px;
  line-height: 1.5;
  color: #fff;
  font-family: arial;
  }
  h2 span {
    padding: 2px 0 2px 0 ;
    }
    h2 span::after {
      content: ".";
      position: absolute;
      width: 9950px;
      margin-left: -9900px;
      margin-right: -50px;
      bottom: .1em;
      z-index: -1;
      line-height: 1.3;
      color: blue;
      background: blue;
      box-shadow:
        5000px -1.5em 0 blue,
        5000px -3em 0 blue,
        5000px -4.5em 0 blue,
        5000px -6em 0 blue,
        5000px -7.5em 0 blue,
        5000px -9em 0 blue,
        5000px -10.5em 0 blue,
        5000px -12em 0 blue,
        5000px -13.5em 0 blue;
      }

<h2>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</span>
</h2>

Create a stylish block element with vertical gaps between each line, extending to full width except for the final line

Answer №1

Answer №2

Exploring Options

A Possible Fix

Answer №3

Answer №4

Answer №5

Similar questions

Is the rotate() method in SVG supported on web browsers when passing in additional parameters like angle, centerX, and centerY similar to the CSS rotate

Issue encountered when trying to attach a hover event to the items in a comb

Simple steps to manipulate HTML content within a span element using JavaScript

Child divs are not displaying the background image set in the background

Issue concerning invisible border

Executing the main process function

Styling Images with Gradient using CSS

Optimizing HTML5 metatags and styles for a mobile application

Different ways to generate DOM element using jQuery

"In the shadows, the .toLowerCase() method of undefined is failing without making a sound, yet the code

The error messages for validations are not appearing as expected in the display

Disappearing a menu list while zooming in on a page: The art of vanishing navigation

chart.js version 3 does not display the correct date data on the time axis

What methods can be utilized in JavaScript to replicate the functionality of the CSS attr() function?

Matching Two HTML Tables in Django Template is Imperative

Using the jQuery validation plugin to pass a function as a parameter

Is it possible to arrange elements in CSS based on their attribute values?

What is the reason for the jquery change event failing to fire when the select value is modified using val()?

Conditional jQuery actions based on the selected radio button - utilizing if/else statements

What is the best way to position this in a straight line?