How to Add Padding to the End of Text Lines in CSS and JavaScript?

Add Padding to Beginning and End of Text Lines

The need for padding on specific lines of text can arise in various design scenarios. In this case, the user desires a 10px padding at the end of each line in a span element.

CSS Approach:

The provided CSS code offers a creative solution to achieve this effect. It utilizes a combination of inline-blocks, border-left style, and positioning tricks to simulate the desired padding:

#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;
}

This solution, while impressive, is not without its challenges and is not recommended for all browsers. However, it demonstrates the flexibility of CSS techniques.

JS Solution:

For a simpler approach, you can use JavaScript to find the line breaks and add non-breaking spaces as needed.

The above is the detailed content of How to Add Padding to the End of Text Lines in CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!