How to add ellips to 2 line text in css? [duplicat

Question

This question already has answers here:

Applying an ellipsis to multiline text [duplicate] (23 answers)

Closed 5 months ago.

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>

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

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