html - 是否可以在换行符上向 anchor 标记添加填充？

Question

我有以下带填充的链接。在移动屏幕上，它有一个换行符。是否可以在第一行的末尾和第二行的开头添加填充？

div {
  max-width: 30rem;
  margin: 5rem auto;
}
a {
  padding: 10px 20px;
  background: red;
  line-height: 200%;
}

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

Answer 1

使用box-decoration-break :

div {
  max-width: 30rem;
  margin: 5rem auto;
}

a {
  padding: 10px 20px;
  background: red;
  line-height: 200%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

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