Cut a single line:
span {
display: inline-block; // 如果不是block元素，还需要设置这个。
width: 150px; // 超出的宽度
overflow: hidden; // 超出隐藏
text-overflow: ellipsis; //超出用省略号
white-space: nowrap; // 不换行
}Multi-line truncated:
Multi-line cutoff There are several ways,
1: The most simple to use -webkit-line-clamp, of course, only be used in webkit core browser and does not support custom click to expand styles.
p {
width: 400px; // 超过这个宽度
text-overflow: ellipsis; // 使用省略号
display: -webkit-box; // 必须使用这个
overflow: hidden;// 必须使用，超出隐藏
-webkit-line-clamp: 4; // 必需设置，
-webkit-box-orient: vertical; // 设置里面元素排列顺序
text-align: justify; // 里面问题排列方式
}2: it is a way to answer the interview, using the pseudo-class. . . Due to the use of this js determine whether beyond, it is applied to, you already know that a large section of the text of the scene. But the interviewer is not very satisfied with this approach, ooo, ooo
p{
position: relative;
height: 36px; // 面试官说这个是定死的，所以不灵活。。。感觉很奇怪啊，不是死的话，怎么知道什么情况溢出？
overflow: hidden;
line-height: 18px;
}
p::after{ // 这个是一直有省略号，所以需要js判断是否超出，如果超出的话，就加一个class。
content: '...';
position: absolute;
bottom:0;
right: 0;
}3: float, very complex, do not like to float ......, the use of float time, the ellipsis is a dom node, so you can add things and style, high degree of customization!
<div class="container">
<div class="content">腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
<div class="standard"></div>
<div class="more">...更多</div>
</div>Where the standard is a standard, exceeding its height and they will show an ellipsis, container is a container, exceeding his maximum height, it is hidden. All three div float: right, where the content of margin-left: -standard the width of the standard to get it out, so that standard appears on the left.
.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元素。
}Summary: direct float method can be used to facilitate custom styles and listen for events, and compatibility, and is the perfect temporary solution. It is a little complicated, but online can be directly used Oh ~
Finally, a very complex, looked a long time, I feel a lot of the Internet, can be directly used, without a thorough understanding of special, after all, not a few years, there will be a built-in properties. . .
To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a front-end full-stack learning buckle qun: 784783012 unpaid share some senior front-end development engineers recorded video (from zero base to project real case), front-end engineers the necessary knowledge. Also receive free learning resources
when the real start learning inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.