11px大小的文字
.mini-font{
font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
文字超出显示…
这里超出显示...
的文字,与其他文字在同一行,所以用的是flex布局+max-width属性
.box{
margin-top: 20px;
display: flex;
font-weight: bold;
font-size: 28px;
line-height: 1;
}
.text-ellipsis{
max-width: 84px;
color:royalblue;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="box">
<span>尊敬的客户,请登录</span>
<span class="text-ellipsis">上官婉儿</span>
<span>账号继续操作</span>
</div>
<div class="box">
<span>尊敬的客户,请登录</span>
<span class="text-ellipsis">姜子牙</span>
<span>账号继续操作</span>
</div>
<div class="box">
<span>尊敬的客户,请登录</span>
<span class="text-ellipsis">曹操</span>
<span>账号继续操作</span>
</div>
文字上下左右居中
当一个布局里只有一个元素或只有一行文字的时候,就可以用-webkit-box-orient
这几个属性,pc端最好还是用flex
,因为这几个属性不支持IE11。
资料:CSS box-pack 属性
.box-center{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}