通过在对象内增加一个元素(例如 span),将其字体设置 N 倍大小,然后再通过 scale 设置缩小N倍(将缩放中点设置为左边)。
这样严格来讲,文字其实还是没有剧中的。但是误差缩小为原来的 1/N 了,肉眼基本看不出来了。
代码示例:
/*解决按钮垂直问题*/
button span{
float:left;
font-size:calc(3.5vw*5);
transform:scale(0.2);
white-space:nowrap;
transform-origin:0 50% 0;
}
/*固定span宽度,避免文字设置很大以后造成占位撑大容器*/
button.login span{
width:7vw;
}