整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
时候需要控制下文字数，不然就会溢出，页面就会变样不美观。这时我们就可以用css控制字数，超出部分显示省略号。可以不换行，超出部分显示省略号，也可以可以换行，多行，超出部分显示省略号。
1.不换行，超出部分显示省略号
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>用css控制字数，超出部分显示省略号</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
/*超出部分就隐藏*/
overflow:hidden;
/*不换行设定*/
white-space:nowrap;
/*超出部分的文字显示省略号*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">用css控制字数，超出部分显示省略号用css控制字数，超出部分显示省略号</div>
</body>
</html>
效果图如下：
2.可以换行，多行，超出部分显示省略号
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>可以换行，多行，超出部分显示省略号</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
display: -webkit-box;
-webkit-box-orient: vertical;
/*2行*/
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">1.用css控制字数，超出部分显示省略号用css控制字数，超出部分显示省略号</div>
<div class="box">2.用css控制字数，超出部分显示省略号用css控制字数，超出部分显示省略号</div>
</body>
</html>
效果图如下：
注：此方法适用于WebKit浏览器及移动端。
除注明外的文章,均为来源:汤久生博客,转载请保留本文地址！
原文地址：http://tangjiusheng.com/divcss/169.html
例
下面这个 HTML 表单带有最大长度分别是 85 和 55 个字符的两个输入字段：
<form action="ybb.php" method="get">
<p>Name: <input type="text" name="fullname" maxlength="85" /></p>
<p>Email: <input type="text" name="email" maxlength="55" /></p>
<input type="submit" value="Submit" />
</form>亲自试一试
maxlength 属性规定输入字段的最大长度，以字符个数计。
maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。
<input maxlength="value">值描述characters输入字段中允许的最大字符数。
另外还有
实际运用中啊随处可见的就是PC端的字数控制案例，如标题只能多少字 内容多少字 密码多少长度等等等等，那么这些功能它是怎么实现的呢，今儿这个小分享道哥就给大家分享一下怎么用js去实现文字的输入控制。
已知有如下html代码
<p class="p1"> 计算剩余字数<br> <textarea cols="70" rows="8" id="msg" onkeyup="test()"></textarea><br> <span id="msg_s"></span> </p>
要实现在文本域textarea中输入长度不能超过50的字符并且剩余字数跟随输入的内容不断变化，提示还可以输入多少个字符 （要注意的是一个中文占两个字符 一个英文字母或者符号占一个字符）
代码如下
<script type="text/javascript">
function test2(){
//取出文本框中文本内容
var a=document.getElementById("msg");
var len=50-a.value.length; //与50作比较，得道剩余字数
if(len>0){
//如果剩余字数大于0，则提示剩余字数
document.getElementById("msg_s").innerHTML="您还剩余"+len+"个字";
}else{
//如果剩余字数小于0，即字数已超出，则只留前50个字
document.getElementById("msg_s").innerHTML="您还剩余0个字";
a.value=a.value.substr(0,50);
}
}
</script>
运行结果如下
*请认真填写需求信息，我们会在24小时内与您取得联系。
