How to add ellips to 2 line text in css?

Question

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>

Does this answer your question? [css ellipsis on second line](https://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line) — ThomasGeek, Feb 25 '20 at 04:44
Does this answer your question? [Limit text length to n lines using CSS](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) — Bryan Lee, Feb 25 '20 at 05:01

score 2 · Accepted Answer · answered Feb 25 '20 at 04:55

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>

Perfect! I'm supersized I have not found this anywhere else. Does it have any downsides? — , Feb 25 '20 at 05:01
@isa123 You have to verify the browser compatibility of `-webkit-line-clamp: 2; -webkit-box-orient: vertical;` — Akhil Aravind, Feb 25 '20 at 05:28

score 0 · Answer 2 · answered Feb 25 '20 at 05:05

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

How to add ellips to 2 line text in css?

2 Answers2

Linked