html - 从普通更改为粗体时，CSS 相同的文本自动换行

Question

我看到了几个很好的答案，如何在使用粗体悬停时避免向右移动元素。我的问题是不同的。我有任意文本，必须适合已经固定的框大小。我们谈论的是一个非常短的文本，改变宽度的 2-3 个单词并不重要，没关系。

问题是当措辞是这样的，普通的换行是一行，而粗体的换行是两行。例如

这是示例文本

这是示例
text

在实际编写纯文本时，有没有办法强制粗体版本自动换行。这样，即使文本是纯文本，它也会被换行:

这是示例
text

...这将使过渡更加顺畅。

这说明了问题:http://jsfiddle.net/bpxf4tq0/5/

<button class="launch">This is example text</button>

button.launch {
  border: none;
  width: 120px;
}

button.launch:hover {
  font-weight: bold;
}

Answer 1

如果没有 JavaScript，您将无法完成您想要的操作，但您可以做相反的事情:使按钮的默认宽度与它以粗体显示时的宽度一样宽。一个技巧是也(不可见地)放入粗体文本，强制按钮具有更大的宽度。

这样做的一种方法是将文本放入属性中，并在::before 伪元素中显示属性的内容。

在这个例子中，我有两个按钮，一个带有处理(始终具有“粗体”宽度)，一个用于比较，一个以正常方式运行(即加粗时变宽)。

button:hover {
  font-weight: bold
}

button::after {
  content: attr(data-value);
}

button.launch::before {
  content: attr(data-value);
  visibility: hidden;
  display: block;
  height: 0;
  font-weight: bold;
}

<button class="launch" data-value="This is example text"></button>
<hr>
<button data-value="This is example text"></button>

希望这有助于解决问题!