文本溢出省略号
程序员文章站
2022-04-22 13:38:16
...
最近开发过程中，经常遇到 文本溢出 的显示问题。现归纳一下几种方法。
早在2012年，所有浏览器都已经支持text-overflow:ellipsis;
一、单行文本溢出
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.text_overflow_1{
width:27em;
white-space:nowrap; /*规定段落中的文本不进行换行*/
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;
}
</style>
</head>
<body>
<div class="text_overflow_1">
江苏优胜信息技术有限公司主要经营：等产品。公司尊崇“踏实、拼搏、责任”的企业精神，并以诚信、共赢、开创经营理念，创造良好的企业环境，以全新的管理模式，完善的技术，周到的服务，卓越的品质为生存根本，我们始终坚持用户至上 用心服务于客户，坚持用自己的服务去打动客户。 欢迎各位新老客户来我公司参观指导工作，我公司具体的地址是：江阴市澄江中路159号A604 。 您如果对我们的产品感兴趣或者有任何的疑问，您可以直接给我们留言或直接与我们联络，我们将在收到您的信息后，会第一时间及时与您联络。
</div>
</body>
</html>
二、多行文本溢出
对于现代浏览器，例如webkit内核的浏览器，或者移动端，是可以实现多行文本内容超出点点点…最后一行显示的，典型的CSS组合如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 400px;
display: -webkit-box;
-webkit-line-clamp: 3;/*控制在第3行出现...*/
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<div class="text_overflow_1">
江苏优胜信息技术有限公司主要经营：等产品。公司尊崇“踏实、拼搏、责任”的企业精神，并以诚信、共赢、开创经营理念，创造良好的企业环境，以全新的管理模式，完善的技术，周到的服务，卓越的品质为生存根本，我们始终坚持用户至上 用心服务于客户，坚持用自己的服务去打动客户。 欢迎各位新老客户来我公司参观指导工作，我公司具体的地址是：江阴市澄江中路159号A604 。 您如果对我们的产品感兴趣或者有任何的疑问，您可以直接给我们留言或直接与我们联络，我们将在收到您的信息后，会第一时间及时与您联络。
</div>
</body>
</html>
三、超出字数文本溢出（jquery）
//没有css啦，只有js代码：
$(document).ready(function(){
//限制字符个数
$("text_overflow").each(function(){
var maxwidth=10;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
});
});
以下是完整demo，可直接复制查看效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*模拟三角效果*/
.box {
/*宽、高自适应*/
/*width:200px;*/
/*height:100px;*/
min-width: 100px;
margin:20px auto;
position:absolute;
z-index: 1001;
left:0;
top:28px;
background-color: #fff;
box-shadow: 2px 4px 6px #666;
display: none;
border-radius: 15px;
padding: 10px;
text-align: justify;
}
.boxcontent {
width:100%;
height:100%;
color:#727272;
font-weight: normal !important;
border-radius: 15px;
/*padding: 20px;*/
display: inline-block;
text-align: center;
}
.boxcontent p{height: 50px;margin: 0;line-height: 50px;}
.boxcontent p img{float: left;position: relative;top:16px;left: 15px;width: 18px;}
.boxcontent p span{float:left;margin-left: 25px;}
.border-arrow {
width:0;
height:0;
font-size:0;
line-height:0;
position:absolute;
left:48%;
top:-16px;
}
.border-arrow em,.border-arrow i {
width:0;
height:0;
display:block;
position:absolute;
border:8px solid transparent;
border-style:dashed dashed solid dashed;
}
.border-arrow em {
border-bottom-color:#ccc;
}
.border-arrow i {
border-bottom-color:#fff;
top:1px;
}
.panel-header img{width: 30px;}
.my-mask{position:fixed;z-index:1000;width: 100%;height: 100%;background-color: rgba(0,0,0,.2);display: none;}
</style>
</head>
<body>
<div style="position: relative;width: 100px;">
<div class="wxz_text_overflow" style="width: 100px;">这是一段测试文本，里面有很长的字段！</div>
<div class="box animated">
<div class="boxcontent">
</div>
<div class="border-arrow"> <em></em> <i></i> </div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script >
$(function(){
$('.boxcontent').text($(".wxz_text_overflow").text());
//限制字符个数
$(".wxz_text_overflow").each(function(){
var maxwidth=10;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
//鼠标悬停显示全部信息
$(this).hover(function () {
$('.box').fadeIn();
}, function () {
$('.box').fadeOut();
})
});
});
</script>
</body>
</html>
/**********111****/
/*****222*********/
/********333******/