Html CSS以避免容器调整大小以适应粗体文本

这是一个复杂的标题，但很容易演示

#txt{
填充物：5px；
}
#txt：悬停{
字体大小：粗体；
}
#试验{
显示：内联块；
边框：实心1px黑色；
最小宽度：100px；
}

这是一些文本

这里有一个想法，使用before和after属性根据粗体文本宽度调整元素的大小。不幸的是，这需要更改标记

#txt{
线高：1.4em；
填充物：5px；
文本对齐：居中；
}
#txt:：之前{
内容：attr（数据内容）；
显示：块；
字体大小：粗体；
高度：0px；
可见性：隐藏；
}
#txt:：之后{
内容：attr（数据内容）；
字体大小：正常；
}
#txt:hover:：after{
字体大小：粗体；
}
#试验{
显示：内联块；
边框：实心1px黑色；
最小宽度：100px；
}

---

设置最小宽度（可容纳粗体或普通字体）的可能重复比摆弄边距容易得多。您可以在悬停时调整左边距和右边距，以调整粗体状态下较大的文本大小，但这很容易更改字体，并且您的计算处于关闭状态，您的容器将在悬停时抖动（或者如果您的用户缩放…）。