我想在溢出超过 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>
关于javascript - 如何在CSS中的两行文本中添加省略号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60387608/