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

-1

#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做，避免容器（测试）调整时，我将鼠标悬停在文本上？就像拿起调整大小的填充或边距一样。或者设置宽度，以便处理粗体文本（但仍然是动态的）。

来源

2016-03-31 dan08

的可能的复制（[内联元素大胆上悬停时移] http://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-悬停） –

设置一个可以适应任何字体粗体或正常粗体的最小宽度要比调整页边空白脆弱得多。您可以在悬停时调整边距和左右边距以调整粗体字的较大文字大小，但它很脆弱 - 更改字体并且您的计算已关闭，并且您的容器在悬停时抖动（或用户放大了.. ）。 –

这是一个想法，使用前后属性来根据粗体文本宽度来设置元素的大小。不幸的是，这需要改变你的标记。

#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>

来源

2016-03-31 23:37:16 user2867288

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

回答

相关问题