如何在 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中文网其他相关文章！