Can't use text-overflow:ellipsis correctly

Question

I want the text to "complete" the height length and when it reaches the maximum, it will use the ellipsis, but I can't figure it out. What I have only writes in a line and I wanted the full length

<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

Removed the white-space:nowrap; but the ellipsis still don't appear

It is unclear what you ask, sorry. What is the difference in your eyes between "a line" and "the full length" ? — arkascha, Mar 16 '17 at 11:25
This definitely works - https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ — zik, Mar 16 '17 at 11:31
There is no pure `css` solution for this. The `text-overflow` rule only effects single line text passages. — arkascha, Mar 16 '17 at 11:41

Dhaarani · Answer 1 · 2017-03-17T08:40:29.700

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>

This does not result in an ellipsis getting applied. – arkascha Mar 16 '17 at 11:42 — arkascha, Mar 16 '17 at 11:42

Can't use text-overflow:ellipsis correctly

1 Answers1