整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
很多网站的表单提交页面中文本框输入时会出现限制输入的字数，然后还会统计你已经输入多少字数剩余多少。今天就来简单写一个类似的例子，有兴趣的小伙伴可以参考下：
效果图：
html:
JS代码：
首先获取输入的字节数然后用总限制字数减去输入的等于已经输入多少赋值给rem.最后就计算id为id2中剩余输入的字数。
、将富文本html内容转换为纯文本
formatrichtext=(richtext, len=0)=> {
let content=richtext.replace(/<.+?>/g, '');
content=content.replace(/ /ig, ''); /* 去除 */
content=content.replace(/\s/ig, ''); /* 去除空格 */
return content;
}2、限制展示的文本长度
时候需要控制下文字数，不然就会溢出，页面就会变样不美观。这时我们就可以用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
*请认真填写需求信息，我们会在24小时内与您取得联系。
