CSS word ellipsis ('…') after one or two lines

Question

I\'m trying to create a word-wrap in JavaScript using CSS, and the condition is:

If DIV contains one very long word, such as \"asdasfljashglajksgkjasghk

Answer 1

If you can guarantee the content will run over, here is the solution I came up. It works for my site and I wanted to keep it simple.

html:

<p class="snippet">
   [content]
</p>

css:

.snippet {
    position: relative;
    height: 40px; // for 2 lines
    font-size: 14px; // standard site text-size
    line-height: 1.42857; // standard site line-height
    overflow: hidden;
    margin-bottom: 0;
}
.news-insights .snippet:after {
    content: "\02026";
    position: absolute;
    top: 19px;
    right: 0;
    padding-left: 5px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white); // use vendor prefixes for production code
}

You can then play around with the padding and background gradient to get a more stylish presentation.

Answer 2

Sadly, with CSS alone I don't think you can.

http://jsfiddle.net/TVVHs/

text-overflow: ellipsis; only works with white-space: nowrap; which prevents multiple lines.

There probably is a crazy javascript solution that keeps chopping off words until the element height is acceptable, but that will be slow and pretty damn hacky nasty.

Answer 3

Hope this answers your question

  @mixin multilineEllipsis(
  $lines-to-show: 2,
  $width: 100%,
  $font-size: $fontSize-base,
  $line-height: 1.6) {

  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: $width;
  height: $font-size * $line-height * $lines-to-show; /* Fallback for non-webkit */
  font-size: $font-size;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

http://codepen.io/martinwolf/pen/qlFdp http://caniuse.com/#search=-webkit-line-clamp

Answer 4

After fiddling around with the CSS to come up with a "next-best" CSS ONLY solution, I came up with this:

p.excerpt { position: relative; height: 63px; line-height: 21px; overflow-y: hidden; }
p.excerpt:after { content: '...'; position: absolute; right: 0; bottom: 0; }

This would always assume you have at least 3 lines of text, and there are a couple of issues with it. If the last word to wrap onto line 4 is very long, there would be an unusually large blank space between the last word and the ellipsis. Similarly, it could overlap the last word if it was something very, very small, like "a".

You could add another container and have the ellipsis outside of the p, and with a bit of comment tweaking I'm sure someone will fiddle up something better.

Answer 5

Found this:

http://codepen.io/martinwolf/pen/qlFdp

Looks like -webkit-line-clamp works in some browsers.

Answer 6

For this you can use text-overflow: ellipsis; property. Write like this

white-space: nowrap;
text-overflow: ellipsis;