html怎么使文本超出自动缩小字体

发布网友发布时间：2022-04-21 22:51

共7个回答

热心网友时间：2022-05-11 09:15

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>


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

<script>
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>

热心网友时间：2022-05-11 10:33

可以使用js代码来判断文本是否超出，如果超出则使用不同的css代码，
我使用伪代码来表示一下：

if  文本未超出：
    使用css代码1
else：
    使用css代码2

追问那么请问怎么判断文本是否超出呢？标签

热心网友时间：2022-05-11 12:08

可以使用js代码来判断文本是否超出，如果超出则使用不同的css代码，
我使用伪代码来表示一下：

if 文本未超出：
使用css代码1
else：
使用css代码2

热心网友时间：2022-05-11 13:59

每个文本的文字长度都是有个数*的，有的看不见是默认隐藏的，判断文本的字体长度就可以了。

热心网友时间：2022-05-11 16:07

在css中控制字体使用%；

热心网友时间：2022-05-11 18:32

并没有这个功能，只能用JS来做判断了追问那js该如何写？

热心网友时间：2022-05-11 21:13

自动缩小是什么情况？不应该是溢出隐藏，或者是自动换行吗？