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>