css文本超出div隐藏剩下内容并显示省略号
单行文本
<style>
.test {
width: 300px;
height: 30px;
line-height: 30px;
border: 1px solid black;
white-space: nowrap;//强制在单行显示
overflow: hidden;
text-overflow: ellipsis;//关键
}
</style>
<body>
<div class="test">
<span>这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容</span>
</div>
</body>
效果图
多行文本(火狐没效果)
<style>
.children-school-content{
width: 195px;
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
<body>
<div>
<p class="children-school-content">胡那英据了哈哈很快恢复喝咖啡很简单回复肯定会很深刻的划分空间的喝咖啡和空间的划分哈萨克返回看得见可适当减肥后肯定会发空间哈萨克发动机后方可恢复开放解饿哦就我几个几个了解</p>
</div>
</body>
效果图：
兼容火狐写法，使用伪元素。
<style>
ul {
width: 300px;
margin: 40px auto;
padding: 12px 4px 12px 24px;
border: 1px solid #eee;
}
li {
margin: 12px 0;
}
li a {
display: block;
width: 81px;
overflow: hidden;/*注意不要写在最后了*/
white-space: nowrap;
color: #000;
}
li:not(p) {
clear: both;
}
li:not(p) a {
max-width: 170px;
float: left;
}
li:not(p):after {
content: "...";
float: left;
width: 27px;
padding-left: 5px;
color: #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
</ul>
</body>
效果图：