sahibeast sahibeast - 3 months ago 10
CSS Question

Text-overflow elipsis disappearing when I change height

I need to get elipsis to work for a paragraph, but when I change the height from

height:2.5em;
to
height:1.25em;
, the elipsis go away.



.a {
font-size: 13px;
display: block;
width: 100%;
height: 2.5em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow-y: hidden;
text-overflow: ellipsis;
white-space: normal;
margin-bottom: 10px;
}

<p class="a">
This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>




Answer

By decreasing the height, you decreased the number of lines that can be shown. So you have to decrease the -webkit-line-clamp value to match the maximum number of lines. In this case, it is 1:

.a {
  font-size: 13px;
  display: block;
  width: 100%;
  height: 1.25em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  margin-bottom: 10px;
}
<p class="a">
  This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>

Comments