如何在 CSS 和 JavaScript 中為文字行末尾添加填充？

在文字行的開頭和結尾加上填滿

在各種設計場景中可能會出現在特定文字行上填充的需要。在這種情況下，使用者希望在 span 元素中的每行末尾有 10px 的填充。

CSS 方法：

提供的 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;
}

此解決方案雖然令人印象深刻，但並非沒有挑戰，因此不建議所有瀏覽器使用。不過，它展示了 CSS 技術的靈活性。

JS 解決方案：

更簡單的方法，您可以使用 JavaScript 查找換行符並添加不間斷根據需要留出空間。

以上是如何在 CSS 和 JavaScript 中為文字行末尾添加填充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！