防止伪元素自己断行

Question

我有一个 link 样式，它使用 &::after 在 link 的末尾添加了一个 SVG 箭头。问题是，当视口改变大小时，有时只有 SVG 会换行。我如何设置它以便 SVG 总是用 <a> 标签中的最后一个单词换行？

.txtbtn {
  font-size: 1.125rem;
  line-height: 1.222222222;
  letter-spacing: 2.57px;
  color: orange;
  text-decoration: none;
  position: relative;
  text-transform: uppercase;
}

.txtbtn::after {
  position: relative;
  top: 0;
  display: inline-block;
  margin-left: 12px;
  width: 22px;
  height: 15px;
  content: "";
  background: url('https://www.jea.com/cdn/images/svgs/right-arrow.svg') no-repeat center center;
  background-size: contain;
}

<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur abittor.</a></p>

感谢您的帮助。

Answer 1

您可以将最后一个字用 <span> 包裹起来，然后将该跨度设置为具有 puesdo 元素并将其设置为 white-space: nowrap;

像这样：

.txtbtn {
  font-size: 1.125rem;
  line-height: 1.222222222;
  letter-spacing: 2.57px;
  color: orange;
  text-decoration: none;
  position: relative;
  text-transform: uppercase;
}

.txtbtn span::after {
  position: relative;
  top: 0;
  display: inline-block;
  margin-left: 12px;
  width: 22px;
  height: 15px;
  content: "";
  background: url('https://www.jea.com/cdn/images/svgs/right-arrow.svg') no-repeat center center;
  background-size: contain;
}

.txtbtn span {
  white-space: nowrap;
}

<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur <span>abittor.</span></a></p>

Answer 2

您可以添加与图标大小相等的负边距，并在父元素上使用填充来纠正此问题。这个技巧将在我们到达第一个单词时启用中断，并且逻辑上图标将跟随。

我也去掉了margin-left，把宽度调大了，然后把背景位置往右调整了。

p {
  padding-right:22px;
}
.txtbtn {
  font-size: 1.125rem;
  line-height: 1.222222222;
  letter-spacing: 2.57px;
  color: orange;
  text-decoration: none;
  position: relative;
  text-transform: uppercase;
}

.txtbtn::after {
  position: relative;
  top: 0;
  display: inline-block;
  margin-right:-32px;
  width: 32px;
  height: 15px;
  content: "";
  background: url('https://www.jea.com/cdn/images/svgs/right-arrow.svg') no-repeat right/contain;
}

<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur abittor.</a></p>

防止伪元素自己断行

Prevent pseudo-element from breaking a line by itself

css

line-breaks

pseudo-element