Bagaimana untuk Menambah Padding pada Penghujung Baris Teks dalam CSS dan JavaScript?

Tambahkan Padding pada Permulaan dan Penghujung Baris Teks

Keperluan untuk pelapik pada baris teks tertentu boleh timbul dalam pelbagai senario reka bentuk. Dalam kes ini, pengguna menginginkan padding 10px di hujung setiap baris dalam elemen span.

Pendekatan CSS:

Kod CSS yang disediakan menawarkan penyelesaian kreatif untuk mencapai kesan ini. Ia menggunakan gabungan blok sebaris, gaya kiri sempadan dan helah kedudukan untuk mensimulasikan pelapik yang diingini:

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

Penyelesaian ini, walaupun mengagumkan, bukan tanpa cabaran dan tidak disyorkan untuk semua penyemak imbas . Walau bagaimanapun, ia menunjukkan fleksibiliti teknik CSS.

Penyelesaian JS:

Untuk pendekatan yang lebih mudah, anda boleh menggunakan JavaScript untuk mencari pemisah baris dan menambah tanpa putus ruang mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Padding pada Penghujung Baris Teks dalam CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!