项目需求: 字体在固定宽度的盒子中适应
知识点: css 、js
html结构:
<div class="logo">
<div class="logo-name">
{
{ logoObj.name }}
</div>
</div>
css代码:
// 父级盒子
.logo {
float: left;
width: 200px;
height: 52px;
line-height: 52px;
color: #fff;
text-align: center;
cursor: pointer;
overflow: hidden;
// 文字样式
&-name {
font-family: PangMenZhengDao;
height: 52px;
line-height: 52px;
text-align: center;
font-size: 26px;
font-weight: bold;
display: inline-block;
white-space: nowrap;
transform-origin: left center;
}
}
js逻辑处理:
handleTextAdaptive() {
let domContainer = document.querySelector('.logo');
let domText = domContainer.querySelector('.logo-name');
if (domText.clientWidth <= domContainer.clientWidth) {
domText.style.transform = 'none';
} else {
let r = domContainer.clientWidth / domText.clientWidth;
domText.style.transform = 'scale(' + r + ')';
}
},