Text-overflow elipsis disappearing when I change height - html

Question

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;
}
.b {
height:1.25em !important;
}
<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>
<p class="a b">
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 1

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>

Answer 2

The problem is that you have -webkit-line-clamp set to 2. You will need to change that to 1.
Keep in mind that this method is quite fragile and will break if you add padding to your anchor and may be hard to maintain in different viewports.
There are several important things you should consider here.
First you can set a line-height. Then you will want to multiply each line-clamp times the line-height, and set that value to max-height.
For example:
max-height = (line-height)(-webkit-line-clamp)
max-height = (13px)(2)
max-height = 26px
.a {
font-size: 13px;
line-height: 13px;
max-height: 13px;
display: block;
width: 100%;
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>