附上效果图
1.html,css超过一行显示省略号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.hidden{
/*内容超出后显示省略号*/
text-overflow: ellipsis;
/*内容超出后隐藏*/
overflow: hidden;
/*内容不进行换行*/
white-space: nowrap;
}
</style>
</head>
<body>
<p class="hidden">
文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。
人类往往先有口头的语言后产生书面文字,很多小语种,有语言但没有文字。
</p>
</body>
</html>
2. js控制字数:
2.1 文本框控制输入字数,html
<textarea maxlength="100" class="txt-area" name="" id="txt-area"></textarea>
js:
<script>
// 文本框控制输入字数
$(document).on('input propertychange','#txt-area',function(){
var txtLen = $(this).val().length;
if(txtLen <= 100){
$('#res-num').html(100-txtLen);
}
});
</script>
2.2 控制文字显示,html
<span class="demo">文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。
人类往往先有口头的语言后产生书面文字,很多小语种,有语言但没有文字。</span>
js:
<script>
$(".demo").each(function(){
var len=$(this).text().length; //当前HTML对象text的长度
if(len>20){
var str="";
str=$(this).text().substring(0,20)+"......"; //使用字符串截取,获取前20个字符,想要显示...,在后面加(+"......")多余的字符使用“......”代替
$(this).html(str); //将替换的值赋值给当前对象
}
});
</script>
3.全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>
<!--文本框控制输入字数-->
<textarea maxlength="100" class="txt-area" name="" id="txt-area"></textarea>
<span class="demo">
文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字,很多小语种,有语言但没有文字。
</span>
<script>
//1.文本框控制输入字数
$(document).on('input propertychange','#txt-area',function(){
var txtLen = $(this).val().length;
if(txtLen <= 100){
$('#res-num').html(100-txtLen);
}
});
</script>
<script>
//2.控制显示文字
$(".demo").each(function(){
var len=$(this).text().length; //当前HTML对象text的长度
if(len>20){
var str="";
str=$(this).text().substring(0,20)+"......"; //使用字符串截取,获取前20个字符,想要显示...,在后面加(+"......")多余的字符使用“......”代替
$(this).html(str); //将替换的值赋值给当前对象
}
});
</script>
</body>
</html>