项目中经常会用的标题或摘要超出省略的功能,从网找了一些参照,在这里写一下,希望对你有帮助。。。
一、单行文本溢出省略
CSS样式:
<style>
.box {
width: 120px;
height: 100px;
background: green;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
知识点:
1、white-space: nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
HTML布局:
<div class="box">
<a href="javascript:;">天涯何处无芳草,TMD就是找一到</a>
</div>
效果:
二、多行文本溢出省略
CSS样式:
<style>
.box {
display: -webkit-box;
width: 120px;
height: 100px;
background: green;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
知识点:
1、word-break:break-all 允许在单词内换行
2、box-orient:vertical 子元素垂直排列
3、-webkit-line-clamp:指定到多少行出现省略号
HTML布局:
<div class="box">天涯何处无芳草,TMD就是找不到天涯何处无芳草,TMD就是找不到天涯何处无芳草,TMD就是找不到
</div>
效果:
谢谢关注~