How to add ellips to 2 line text in css? [duplicate]

问题

I would like to add an ellipse (...) to the end of text that overflows past 2 lines. Currently I have tried the whitespace nowrap but that does it for only one line.

How can I achieve a 2 line ellipse (...)?

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

回答1:

You need to update your .portalTitle class style with

  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;

Here, the below css is limiting the content to 2 lines.

  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>

回答2:

replace in your css file- and i think solw your problem

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

来源：https://stackoverflow.com/questions/60387608/how-to-add-ellips-to-2-line-text-in-css

标签

javascript

html

css

ellipse