div中文字根据容器宽度自适应调整大小,通过js函数实现
在开发过程中,碰到这样一个需求:在某个价格框内文字在不超过div宽度的情况下,自适应调节自身字体大小。通过查询资料,css3中貌似不存在某个属性可以让文字根据宽度自适应调节字体大小,固需要通过js控制transform:scale这一属性来实现自适应调节字体大小。function refreshPageScalePrice() {function autoSetScale(element) {co
·
在开发过程中,碰到这样一个需求:在某个价格框内文字在不超过div宽度的情况下,自适应调节自身字体大小。
通过查询资料,css3中貌似不存在某个属性可以让文字根据宽度自适应调节字体大小,固需要通过js控制transform:scale这一属性来实现自适应调节字体大小。
function refreshPageScalePrice() {
function autoSetScale(element) {
const maxWidth = element.dataset.maxWidth || 300
if (element.clientWidth <= maxWidth) {
element.style.transform = 'none';
} else {
const scaleNum = maxWidth / element.clientWidth;
element.style.transform = 'scale(' + scaleNum + ')';
}
}
const autoScalePrice = document.querySelectorAll('.scalePrice')
for (var i = 0; i < autoScalePrice.length; i++) {
autoSetScale(autoScalePrice[i])
}
}
某个元素需要自适应宽度,需要在class中添加scalePrice这一属性,并定义data-max-width最大宽度,文字超过该宽度就会自适应调整文字大小。使用前需要调用该函数。
<div class="left-column">
<div class="originPrice scalePrice" data-max-width="180">$99,911.11</div>
</div>
例如:
实现效果:定义font-size:60px 设置最大宽度为180px
①文字内容为6位的情况
②文字内容为10位的情况
可见,文字根据宽度自适应调节大小功能完成!
更多推荐
已为社区贡献1条内容
所有评论(0)