How to Add Padding to the Beginning and End of Each Line of Text in a Multi-Line Span?

Add Padding at the Beginning and End of Each Line of Text

Background

In this scenario, a span extends over multiple lines with a background color. The user desires a 10px padding at the end of each line, but avoids manually inserting nbsp tags. CSS or JavaScript solutions are preferred.

CSS Solution

In IE8 and later versions of Chrome, Firefox, Opera, and Safari, the following CSS and HTML code provides a creative solution:

CSS:

#titleContainer { width: 520px }
h3 { margin: 0; font-size: 42px; font-weight: bold; font-family: sans-serif }
h3 .heading { background-color: #000; color: #00a3d0; }
h3 .subhead { background-color: #00a3d0; color: #000; }
div { line-height: 1.1; padding: 1px 0; border-left: 30px solid #000; display: inline-block; }
h3 { background-color: #000; color: #fff; display: inline; margin: 0; padding: 0 }
h3 .indent { position: relative; left: -15px; }
h3 .subhead { padding: 0 15px; float: left; margin: 3px 0 0 -29px; outline: 1px solid #00a3d0; line-height: 1.15 }

HTML:

<div>

Explanation

This technique creates multiple divs for each line, with padding and a solid border on the left. Within each div, an inline h3 element positions the text. The subhead is floated left to remove the border and add line height.

Considerations

This solution is complex and may encounter issues in certain browsers. While it provides a visual approximation of the desired padding, it may not be perfect in all cases.

The above is the detailed content of How to Add Padding to the Beginning and End of Each Line of Text in a Multi-Line Span?. For more information, please follow other related articles on the PHP Chinese website!