首先我们以
.content {
width: 150px;
height: 150px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.content p {
font-size: 10px;
}
<div class="content">
<p>测试测试测试测试十二个字</p>
<p>测试测试测试测试测试十四个字</p>
</div>
运行代码是这样的:
当然我们都知道,chrome是不支持12px以下的中文的,这个属性-webkit-text-size-adjust也已失效,
当然我们的解决方法是 scale
transform:scale(0.875);
font-size: 12px;
但是我们会发现 文字所在的容器容器也跟着缩小了!!样式没有任何变化,这显然不是我们想要的,我们需要居中,接下来,我们给其 添加一个属性! postion: absolute; !!!!! 再通过left top 等来调节
p:last-child{
position: absolute;
left: 45%
}
效果:
transform-origin 属性有时候可以帮助你缩小元素后左对齐,居中等操作
当然 还有一种更高级的用法!!! svg标签你敢信!
无意中看到了张鑫旭大大的文章!
https://www.zhangxinxu.com/wordpress/2018/03/svg-text-font-size-auto-scale/ 解释: SVG由于是矢量的,因此,再怎么拉伸我们的文字效果都是清晰细腻的
div class="content">
<svg width="150" height="14" viewBox="0 0 150 14">
<text font-family="'PingFang SC','Microsoft Yahei'" font-size="10" x="4" y="1em" fill="#cd0000">测试测试测试测试测试十四个字</text>
</svg>
</div
实际效果:
扫描二维码关注公众号,回复:
4862221 查看本文章
理解svg属性的话,可以参考:https://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/
如果有错误或者不严谨的地方,请务必给予指正,十分感谢!