如何为换行后的锚点标签（a标签）添加首尾内边距？

当然可以实现，最便捷的方式是利用CSS的box-decoration-break属性，让链接的padding和背景在换行时作用于每一行的首尾。

优化后的代码 #

CSS 代码 #

div {
  max-width: 30rem;
  margin: 5rem auto;
}
a {
  padding: 10px 20px;
  background: red;
  line-height: 200%;
  /* 核心属性，实现换行后样式克隆 */
  box-decoration-break: clone;
  /* 兼容WebKit内核浏览器（如Chrome、Safari） */
  -webkit-box-decoration-break: clone;
}

HTML 代码 #

<div>
  <a href="#">Read More: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</a>
</div>

原理说明 #

默认情况下，内联元素的padding和背景只会作用于整个元素的左右两端，换行后中间行的首尾不会有padding。而box-decoration-break: clone会将元素的装饰样式（背景、padding、边框等）复制到每一行，让每一行都拥有独立的左右padding，完美解决移动端换行后的样式问题。

备选兼容方案 #

如果需要兼容更老的浏览器，也可以用伪元素模拟行内padding：

div {
  max-width: 30rem;
  margin: 5rem auto;
}
a {
  background: red;
  line-height: 200%;
  position: relative;
  padding: 10px 0;
}
a::before, a::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 100%;
  background: red;
  vertical-align: middle;
}
a::before {
  margin-right: 0;
  margin-left: -20px;
}
a::after {
  margin-left: 0;
  margin-right: -20px;
}

不过这种方法需要手动匹配背景色，不如box-decoration-break简洁高效。

内容的提问来源于stack exchange，提问作者Zainab Hussain