Html Css在从纯文本更改为粗体时使用相同的文字换行

我已经看到了一些很好的答案，当使用粗体表示悬停时，如何避免移动正确的项目。我的问题不同。我有任意文本，必须适应已经固定的框大小。我们谈论的是一篇很短的文本，2-3个单词改变宽度并不重要，也没关系

问题是，当措辞是这样的，包装在平原是一行，当粗体是在两行。比如说

这是示例文本

这是示例
文本

在实际编写纯文本时，是否有一种方法可以强制对粗体文本进行换行。这样，即使文本是纯文本，也会被包装：

这是示例
文本

…这将使过渡更加平滑

这说明了问题：

这是示例文本
按钮启动{
边界：无；
宽度：120px；
}
按钮。启动：悬停{
字体大小：粗体；
}

如果没有JavaScript，就无法完成您想要的操作，但您可以做相反的操作：将按钮的默认宽度设置为粗体显示时的宽度。其中一个技巧是将粗体文本也放进去（不可见），强制按钮具有更大的宽度

一种方法是将文本放入属性中，并在：：before伪元素中显示该属性的内容

在本例中，我有两个按钮，一个带有处理（始终具有“粗体”宽度），另一个用于比较，一个以正常方式运行（即粗体时变宽）

按钮：悬停{
字体大小：粗体
}
按钮：：之后{
内容：attr（数据值）；
}
按钮。启动：：之前{
内容：attr（数据值）；
可见性：隐藏；
显示：块；
身高：0；
字体大小：粗体；
}

您可以通过字母间距来实现这一点。当然，常规字体不会以这种方式显示，但根据应用程序的不同，这可能是可以接受的

button.launch{
边界：无；
宽度：120px；
字母间距：0.033em；
}
按钮。启动：悬停{
字体大小：粗体；
字母间距：-0.033em；
}

---

当然，您也可以保持常规字体的字母间距不变，并且仅将粗体字体的字母间距缩小。

您可以在两种字体之间使用

words@TemaniAfif当然，但我确实想把文字包装起来。我只是希望它以同样的方式包装，所以你能分享一个代码示例，这样我们可以更好地see@TemaniAfif如果文本是任意的，则无法确定粗体版本是否会超过使用CSS的容器的宽度。您需要使用javascript确定字数或粗体内容宽度，然后添加

标记或调整容器填充。在我看来，无论如何，用粗体来突出显示悬停是一个糟糕的选择。我发现文本宽度的变化令人不安。

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

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

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