可以设置其text-overflow属性，text-overflow有两个值，分别是clip和ellipsis；
clip ：默认值 ，不显示省略标记(...)，而是简单的裁切；
ellipsis： 当对象内文本溢出时显示省略标记(...)。
如：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title></title>
<style type="text/css">
#box{width:100pxbackground-color:#87CEEBpadding:2px 3px
overflow:hiddentext-overflow:ellipsiswhite-space:nowrap}
</style>
</head>
<body>
<div id="box">测试测试测试测试测试测试测试</div>
</body>
</html>
需要注意的是：
一定要给容器定义宽度；
overflow: hiddentext-overflow:ellipsiswhite-space:nowrap一定要一起用
虽然这种写法有点傻....但是还是写下来吧......
(字体变小对用户体验极其糟糕)
推荐使用响应式开发,以下写法能用,但是并不推荐
首先你要测试好你多少个字会超出文本框
<!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>
为标签设置overflow属性，属性值设置为auto
当overflow属性设置为auto时，内容超出标签区域时会显示滚动条，内容少于标签区域时则不会显示
overflow: auto欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）