如何在CSS中将省略号添加到2行文本？

Question

我想在文本的末尾添加一个椭圆（...），该文本溢出2行。目前，我已经尝试了空白nowrap，但这仅适用于一行。

我如何获得两行椭圆（...）？

.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>

Answer 1

您需要使用]更新您的.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将内容限制为两行。

  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>

Answer 2

替换为您的css文件，我想解决您的问题

Answer 3

[这里有一个类似的帖子Limit text length to n lines using CSS