核心:通过计算缩小的比例,用transform: scale()实现缩放字体
htm部分
用两个相同的盒子,一个用来计算宽度,从而计算缩放比例,另一个用来展示。
<template>
<div class="combo-card">
<div class="card-content">
//展示
<div ref="txt" class="card-left online" :style="cradLeftStyle">
<span class="card-left-symbol">¥</span>
<span class="card-left-amount">99999999999999</span>
<span class="card-left-floor">.99999</span>
</div>
//计算宽度
<div ref="block" class="card-left online block">
<span class="card-left-symbol">¥</span>
<span class="card-left-amount">99999999999999</span>
<span class="card-left-amount">.99999</span>
</div>
<div class="card-right">
<p>右边位置</p>
</div>
</div>
<div style="margin-top:70px">==============5555================1010</div>
</div>
</template>
js部分
需要安装插件:
完整代码:
<script>
import { ResizeObserver } from 'resize-observer'
export default {
data () {
return {
cradLeftStyle: {}
}
},
mounted () {
const txtWidth = this.$refs.txt.getBoundingClientRect().width
this.myObserver = new ResizeObserver((entries) => {
const block = entries[0]
const blockWidth = block.contentRect.width
console.log('他们俩的宽度', block.contentRect.width, txtWidth)
if (blockWidth > txtWidth) {
this.cradLeftStyle = {
transform: `scale(${txtWidth / blockWidth})`,
'transform-origin': 'left'
}
}
})
this.myObserver.observe(this.$refs.block)
},
deactivated () {
if (this.myObserver) {
this.myObserver.disconnect()
}
}
}
</script>
css部分
用来计算宽度的盒子通过隐藏
需要固定自适应部分的宽度,和字体初始大小
完整样式代码:
<style lang="less" scoped>
.combo-card {
text-align: left;
}
.block {
position: absolute;
opacity: 0;
width: auto !important;
}
.card-content {
font-family: PingFangSC-Regular, PingFang SC;
position: absolute;
top: 0;
display: flex;
align-items: center;
background: #b9dae5;
.card-left {
width: 300px;
color: #844700;
&.online {
white-space: nowrap;
}
.card-left-symbol {
margin: 0 auto;
font-size: 38px;
}
.card-left-amount {
margin: 0 auto;
font-size: 50px;
font-weight: bold;
}
.card-left-floor {
font-size: 42px;
font-weight: bold;
}
}
.card-right {
background: red;
margin-left: 28px;
color: #844700;
}
}
</style>
效果展示: