html - CSS 避免容器调整大小以适合粗体文本

Question

有点复杂的标题，但很容易演示

#txt {
  padding: 5px;
}
#txt:hover {
  font-weight: bold;
}
#test {
  display: inline-block;
  border: solid 1px black;
  min-width: 100px;
}

<div id="test">
  <div id="txt">This is some text</div>
</div>

所以我就有了上面的情况。

我可以用 CSS 做些什么来避免容器(测试)在我将鼠标悬停在文本上时调整大小？就像占用调整大小的填充或边距一样。或者设置宽度，使其足以处理粗体文本(但仍然是动态的)。

Answer 1

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

#txt {
  line-height: 1.4em;
  padding: 5px;
  text-align: center;
}
#txt::before {
  content: attr(data-content);
  display: block;
  font-weight: bold;
  height: 0px;
  visibility: hidden;
}
#txt::after {
  content: attr(data-content);
  font-weight: normal;
}
#txt:hover::after {
  font-weight: bold;
}
#test {
  display: inline-block;
  border: solid 1px black;
  min-width: 100px;
}

<div id="test">
  <div id="txt" data-content="This is some text"></div>
</div>

或者，使用文本阴影将文本加粗。

#txt {
  padding: 5px;
}
#txt:hover {
  text-shadow: 0.5px 0px 0px #555, -0.5px 0px 0px #555;
}
#test {
  display: inline-block;
  border: solid 1px black;
  min-width: 100px;
}

<div id="test">
  <div id="txt">This is some text</div>
</div>