How can I apply padding to the end of a line?

Question

The problem I have is I want to put something like this

<span>CONSEQUAT, VEL ILLUM DOLORE EU FEUGIAT NULLA FACILISIS AT VERO EROS ET ACCUMSAN ET IUSTO ODIO DIGNISSIM QUI BLANDIT PRAESENT LUPTATUM ZZRIL DELENIT AUGUE DUIS DOLORE TE FEUGAIT NULLA FACILISI.</span>

with CSS like this

span {
    font-size: 25px;
    line-height: 28px;
    color: white;
    background-color: #2EC6C6;
    padding-right: 5px;
    padding-left: 5px;
}

in a percentage size div. When the line breaks I want each line to have the applied padding to the left and right. At the moment it's only applied at the start and end of the whole sentence.

I know I could put each line in separate span's but I want it dynamic so I could write many lines and it would be applicable.

Any suggestions? Would prefer pure CSS but willing to move to javascript.

Here is a Fiddle

You could also use `text-align:justify;` define the width, eg: `width:100%` and apply padding, eg: `padding: 0 5px;` and it would be important to include: `display:block;` — User_coder, Aug 02 '13 at 13:22
@xec is spot on the money, the post he sent is exactly what I was looking for. — Sjrsmile, Aug 02 '13 at 13:27

score 4 · Answer 1 · answered Oct 31 '14 at 14:34

You can try to use box-decoration-break: clone for webkit/firefox and white-space: pre-wrap for ie

header {
    position: relative;
    margin: 10px;
    width: 300px;
}
header:before {
    content: '';
    position: absolute;
    height: 100%;
    right: 100%;
    width: 12px;
    background: gray;
    background: rgba(0,0,0,.3);
}

h1 {
    display: inline;
    padding: 8px 12px 8px 0;
    font-size: 30px;
    line-height: 49px;
    background: rgba(0,0,0,.3);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* add browser-class to html with modernizr or js */
.ie h1 {
    white-space: pre-wrap;
}
.ff h1 {
    padding: 7px 12px 7px 0;
}

<header>
    <h1>Lorem ipsum dolor, sit amet consectetuer</h1>
</header>

score 2 · Accepted Answer · edited Aug 02 '13 at 13:44

2

From here:

display: inline-block

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

span {
    font-size: 25px;
    line-height: 28px;
    color: white;
    background-color: #2EC6C6;
    padding-right: 5px;
    padding-left: 5px;
    display: inline-block
}

http://jsfiddle.net/DsqY2/

enter image description here source

edited Aug 02 '13 at 13:44

Hemerson Varela

24,034
16
68
69

answered Aug 02 '13 at 13:18

daniel__

11,633
15
64
91

I'm looking for the highlight only to be 5px longer than each line, but for the whole block to be that color. – Sjrsmile Aug 02 '13 at 13:19
1

While this technically answers it, this answer could be improved by adding an explanation as to why the change works. – Shauna Aug 02 '13 at 13:20

score 0 · Answer 3 · edited Aug 02 '13 at 13:41

0

try this

please write display:inline-block; in span class

http://jsfiddle.net/DsqY2/3/

 span {
    font-size: 25px;
    line-height: 28px;
    color: white;
    background-color: #2EC6C6;
    padding-right: 5px;
    padding-left: 5px;
    display:inline-block; /*-add--*/
}

edited Aug 02 '13 at 13:41

Hemerson Varela

24,034
16
68
69

answered Aug 02 '13 at 13:19

Falguni Panchal

8,873
3
27
33

score -1 · Answer 4 · answered Aug 02 '13 at 13:20

-1

Well, it works, if you do it with <div> instead of <span>, see here.

answered Aug 02 '13 at 13:20

Carsten Massmann

26,510
2
22
43

OK, I accept the downvote, but that prompts to me the next question: What are the advantages of using an `inline-block-span` over a `div`? Admittedly it will save you editing your html text. But will they "float" or behave differently on a page? – Carsten Massmann Aug 02 '13 at 13:28
Just worked it out for myself: If there is no `width` property they will more or less behave the same, but *with* the `width`-property `span` will indeed float within a line of text. – Carsten Massmann Aug 02 '13 at 13:32

How can I apply padding to the end of a line?

4 Answers4

Linked