我想在超过2行的文本末尾添加一个椭圆(...)。目前,我已经尝试了空白nowrap,但这仅适用于一行。
如何获得2线椭圆(...)?
.details {
display: inline-flex;
/* text-align: center; */
/* display:block; */
/* display:table-cell;
vertical-align:middle; */
/* background-color: grey; */
margin-right: 5px;
/* width: 95%; */
width:340px;
height: 75px;
cursor: pointer;
text-align: left;
}
.portalTitle {
/* margin-top: 25px; */
margin: auto;
margin-left: 10px;
/* margin: auto; */
/* line-height: 70px; */
font: Arial;
font-family: sans-serif;
font-size: 16px;
font-weight:500;
line-height: 1.5em;
max-height: 3.2em;
overflow: hidden;
/* white-space: nowrap; */
text-overflow: ellipsis;
}
.profileImg {
cursor: pointer;
max-width: 45px;
height: 45px;
border-radius: 25px;
/* margin-top: 10px; */
/* margin: auto; */
margin: auto 2px;
object-fit: cover;
}
<div class="details">
<img class="profileImg" src="images/testImg.png" />
<span class="portalTitle"> Shanghai, China night sounds sounds and more more more sounds look at all those sounds!</span>
</div>
</div>
您需要使用以下内容更新您的.portalTitle
课堂风格
margin: auto;
margin-left: 10px;
font: Arial;
font-family: sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.5em;
max-height: 3.2em;
overflow: hidden;
display: block;
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
在此,下面的CSS将内容限制为2行。
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
.details {
display: inline-flex;
/* text-align: center; */
/* display:block; */
/* display:table-cell;
vertical-align:middle; */
/* background-color: grey; */
margin-right: 5px;
/* width: 95%; */
width: 340px;
height: 75px;
cursor: pointer;
text-align: left;
}
.portalTitle {
margin: auto;
margin-left: 10px;
font: Arial;
font-family: sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.5em;
max-height: 3.2em;
overflow: hidden;
max-width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.profileImg {
cursor: pointer;
max-width: 45px;
height: 45px;
border-radius: 25px;
/* margin-top: 10px; */
/* margin: auto; */
margin: auto 2px;
object-fit: cover;
}
<div class="details">
<img class="profileImg" src="images/testImg.png" />
<span class="portalTitle"> Shanghai, China night sounds sounds and more more more sounds look at all those sounds!. Shanghai, China night sounds sounds and more more more sounds look at all those sounds!. Shanghai, China night sounds sounds and more more more sounds look at all those sounds!. Shanghai, China night sounds sounds and more more more sounds look at all those sounds!. Shanghai, China night sounds sounds and more more more sounds look at all those sounds!</span>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句