单行截断：
span {
display: inline-block; // 如果不是block元素，还需要设置这个。
width: 150px; // 超出的宽度
overflow: hidden; // 超出隐藏
text-overflow: ellipsis; //超出用省略号
white-space: nowrap; // 不换行
}多行截断：
多行截断有好几种方法，
1： 最简单，使用-webkit-line-clamp ， 当然了，只能用在webkit内核浏览器， 并且不支持自定义点击展开的样式。
p {
width: 400px; // 超过这个宽度
text-overflow: ellipsis; // 使用省略号
display: -webkit-box; // 必须使用这个
overflow: hidden;// 必须使用，超出隐藏
-webkit-line-clamp: 4; // 必需设置，
-webkit-box-orient: vertical; // 设置里面元素排列顺序
text-align: justify; // 里面问题排列方式
}2: 也是面试中回答的方式，使用伪类。。。这个由于要使用js判断是否超出，因此适用于，你已经知道是大段文字的情景。 但是面试官不是很满意这个方式，呜呜呜
p{
position: relative;
height: 36px; // 面试官说这个是定死的，所以不灵活。。。感觉很奇怪啊，不是死的话，怎么知道什么情况溢出？
overflow: hidden;
line-height: 18px;
}
p::after{ // 这个是一直有省略号，所以需要js判断是否超出，如果超出的话，就加一个class。
content: '...';
position: absolute;
bottom:0;
right: 0;
}3：使用float， 挺复杂的，不喜欢float......, 使用float时候，省略号是一个dom节点，因此可以添加事情和样式， 自定义程度高！
<div class="container">
<div class="content">腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
<div class="standard"></div>
<div class="more">...更多</div>
</div>其中standard是一个标准，超过它的高度时候，就会显示省略号，container是个容器，超过他的最大高度，就hidden。 三个div都float：right，其中content的margin-left：-standard的宽度，把standard给让出来，让standard出现在左侧。
.container{
max-height: 54px; // 最大高度
overflow: hidden; // 超出隐藏
line-height: 18px; // 方便计算几行。。
font-size:12px;
}
.container div{ // 三个元素都设置float
float: right;
}
.content{
margin-left: -50px; // 这是第一个元素，由于他宽度是100%，所以需要给standard位置。
width:100%;
position:relative;
background: hsla(229, 100%, 75%, 0.5)
}
.standard{
width: 50px; //宽度随意， 需要与上面margin-left一样
height: 54px; // 超出这个高度会出现more元素
position:relative;
color:transparent;
background: hsla(334, 100%, 75%, 0.5);
}
.more{
width:50px; // 这个元素可自定义，宽度
height:18px;
position: relative;
left: 100%; // 确定位置,
transform: translate(-100%,-100%);// 确定位置
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 20%, #fff); // 这是使用渐变，因为more元素会覆盖住content元素。
}总结： 可以直接使用float方法，方便自定义样式及监听事件，并且兼容性好，是暂时最完美的解决方案。就是略复杂，不过网上有可以直接拿来用哦~
最后一个挺复杂的，看了半天，感觉网上很多，可以直接拿来用， 不需要特别理解透彻，毕竟过不了几年，应该就会有内置属性了。。。
为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为前端工程师，乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习扣qun：784783012 无偿分享一些资深前端开发工程师录制的视频录像（从零基础到项目实战案例），前端工程师必备的知识体系。还能领取免费的学习资源
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有效资源还是很有必要的。