项目中有文字标签需要固定宽度,所以需要对超过字数限制的标签做特殊处理,预设的字体是12px,产品那边让继续缩小字体,常规的话肯定是不能缩小了,所以想到了用scale缩放,但是缩放的话也遇到了一些问题,都放在代码注释里了,可以自己运行起来看下效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小于12px字体处理方案</title>
<style>
div {
width: 60px;
text-align: center;
border: 1px solid #000;
}
span {
font-size: 12px;
}
.span1 {
/* 直接设置8px肯定是不生效的,chrome支持的最小字体是12px */
font-size: 8px;
}
.span2 {
font-size: 12px;
/* transform对行内元素不生效 */
display: inline-block;
/* 单纯使用缩放的话,我们会看到其实左右还有剩