Textüberlauf kann nicht verwendet werden: Ellipse korrekt

Question

Ich möchte, dass der Text die Höhe Länge "abgeschlossen" und wenn es das Maximum erreicht, wird es die Ellipse verwenden, aber ich kann es nicht herausfinden. Was ich habe, schreibt nur in einer Linie, und ich wollte die volle Länge

<p class="download-text wow fadeInLeft" style="text-align:justify;height:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus, elit ut blandit lacinia, magna ligula varius mi, in ultrices risus elit ac sem. In finibus tincidunt ligula, ut semper ante feugiat vitae. Phasellus consequat rutrum nulla in rhoncus. 
 
    Fusce turpis magna, imperdiet ac massa eu, maximus porttitor ex. Nam vulputate ex id commodo pharetra. Nunc eget lectus ac nisi vestibulum congue. Donec eget diam nisl. Nulla massa est, efficitur eu enim at, imperdiet bibendum lorem. Duis iaculis felis 
 
    id ex mattis, eu iaculis elit ullamcorper. Mauris semper fermentum justo sodales convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    <h6><button class="btn btn-default">See More</button></h6>

UPDATE

Entfernte den Leerraum: nowrap; aber die Auslassungs noch nicht angezeigt

Answer 1

p{ 
 
     overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    display: -moz-box !important; 
 
    line-height: 16px; 
 
    max-height: 3.6rem; 
 
    -moz-line-clamp: 3; 
 
    -moz-box-orient: vertical; 
 
    display: -webkit-box; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-line-clamp: 3; 
 
}

<p class="download-text wow fadeInLeft"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus, elit ut blandit lacinia, magna ligula varius mi, in ultrices risus elit ac sem. In finibus tincidunt ligula, ut semper ante feugiat vitae. Phasellus consequat rutrum nulla in rhoncus. Fusce turpis magna, imperdiet ac massa eu, maximus porttitor ex. Nam vulputate ex id commodo pharetra. Nunc eget lectus ac nisi vestibulum congue. Donec eget diam nisl. Nulla massa est, efficitur eu enim at, imperdiet bibendum lorem. Duis iaculis felis id ex mattis, eu iaculis elit ullamcorper. Mauris semper fermentum justo sodales convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
<button class="btn btn-default">See More</button>