如何将省略号添加到 css 中的 2 行文本？

Question

我想在超过 2 行的文本末尾添加一个省略号 (...)。目前我已经尝试过 whitespace 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>

Answer 1

您需要将 .portalTitle class 风格更新为

  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>

Answer 2

在您的 css 文件中替换 - 我认为可以解决您的问题

.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;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.profileImg {
  cursor: pointer;
  max-width: 45px;
  height: 45px;
  border-radius: 25px;
  /* margin-top: 10px; */
  /* margin: auto; */
  margin: auto 2px;
  object-fit: cover;
}

如何将省略号添加到 css 中的 2 行文本？

How to add ellips to 2 line text in css?

html

javascript

css

ellipse