Indent text

Question

In the following example, the header text is on several lines. Is it possible to add left and right additions to each line (without wrapping each word in another element, of course)?

If this is not possible using CSS, is it possible to do this using jQuery?

HTML:

<div class="wrap"> <h1>Donec commodo sapien lectus, nec gravida magna</h1> </div> 

CSS

 .wrap{ width: 100px; } h1{ display:inline; background:green; color:#fff; } 

Demo: http://jsfiddle.net/289oo48b/

Answer 1

Adding one container ( span for example) for h1 content:

HTML:

 <div class="wrap"> <h1> <span>Donec commodo sapien lectus, nec gravida magna</span> </h1> </div> 

And using the following CSS:

 .wrap { width: 100px; line-height: 1.3; padding: 2px 0; border-left: 20px solid green; margin: 20px 0; } h1 { display:inline; background:green; color:#fff; padding: 4px 0; margin: 0; } span { position: relative; left: -10px; } 

JSFiddle: https://jsfiddle.net/anini/rwLenu6w/

Answer 2

 .wrap{ width: 100px; } h1{ display: inline-block; white-space: pre-wrap; color:#fff; padding: 0 10px; background: green; word-spacing: 100px; } 

script: http://jsfiddle.net/a56kap9L/

Answer 3

Do you mean linear height? http://jsfiddle.net/qayuxsft/

 line-height: 2em; 

or

 line-height: 200%; 

change display: inline to display: block to fill the spaces with green.