Question

我在这里有一个简单的示例：https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ

包含以下内容：

.wrapper {
  width: 200px;
}

h1 {
  font-size: 32px;
  font-family: Tahoma, Helvetica, sans-serif;
  line-height: 50px;
}

.header-text {
  background: #aabbcc;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 6px;
}

<div class='wrapper'>
  <h1>
    <span class='header-text'>
           Long text that wraps
         </span>
  </h1>
</div>

水平填充仅适用于要换行的文本的开头和结尾，但是我希望它适用于每一行。我可以接受边界半径不在每行的换行点的情况，但是我需要填充以应用

。

如果将padding-top放到适用于这两行的.header-text类中，那么我不清楚为什么行环绕的点会忽略水平填充选项。

有没有办法在CSS中做到这一点？

Answer 1

您可以使用box-decoration-break来实现所需的功能，甚至可以与border-radius一起使用：

.wrapper {
  width: 200px;
}

h1 {
  font-size: 32px;
  font-family: Tahoma, Helvetica, sans-serif;
  line-height: 50px;
}

.header-text {
  background: #aabbcc;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<div class='wrapper'>
  <h1>
    <span class='header-text'>
           Long text that wraps
         </span>
  </h1>
</div>

Answer 2

您可以尝试其他方式

.header-text {
  padding: 0;
  word-spacing: 5px;
}

Answer 3

希望它可以帮助您。增大width中的.wrapper，以便应用padding。

HTML PAGE

            <div class='wrapper'>
              <h1>
                <span class='header-text'>
                  Long text that wraps
                </span>
              </h1>
            </div>

CSS页面

            .wrapper {
              width: 500px;
            }

            h1 {
              font-size: 32px;
              font-family: Tahoma, Helvetica, sans-serif;
              line-height: 50px;
            }

            .header-text {
              background: #aabbcc;
              padding-left: 20px;
              padding-right: 20px;
              border-radius: 6px;
              padding-top:12px;
              padding-bottom:12px
            }

Answer 4

您应该将.header-text显示更改为块或内联块

如何使padding应用于CSS环绕式文字？

4 个答案: