如何控制html中的字体的宽度_随笔

如果你一定要单纯改变宽度，传统的CSS属性是没办法实现的，可以借助CSS3的变形功能来实现，但是是针对标签进行整体变化，而不是单纯针对字体（由于外部标签发生变形，内部元素一同发生变化，算是曲线救国吧），比如：

<style>

.change {

width: 200px

transform: scaleX(1.2)

}

</style>

<div class="change">整个div宽度会被放大1.2倍</div>

在HTML当中，能够使用CSS当中的font-size控制字体大小（字体宽度会随着字体大小而改变），但是没有能够不管高度而只改变字体宽度的属性。

对于文字和文字之间的间距可以使用word-spacing进行控制

虽然这种写法有点傻....但是还是写下来吧......

(字体变小对用户体验极其糟糕)

推荐使用响应式开发,以下写法能用,但是并不推荐

首先你要测试好你多少个字会超出文本框

<!DOCTYPE html>

<html>

<head>

</head>

<p id="css">喵喵喵喵喵喵喵喵喵喵</p>

</div>

var box = document.getElementById('box')

var box = box.innerText //获取 div box里面的所有字

var cat = box.length //转换为字数

if(cat >= 10) //如果box里面字数大于或者等于10

{

document.getElementById("css").style.fontSize=40+'px'

//如果大于10个字字体大小为40px

}

else{

//否则为80px大小

document.getElementById("css").style.fontSize=80+'px'

}

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

如何控制html中的字体的宽度