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

问题

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 "asdasfljashglajksgkjasghklajsghl", I want to display:

     |asdasfljashglajk...|

If DIV contains a long sentence, such as "if i had a dime for everytime i was told i can't", I want to display:

     |if i had a dime for|
     |everytime i was... |

I work with HTML, CSS, JavaScript. I can't use jQuery.

Please let me know if it's possible.

回答1:

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

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

回答2:

I know I'm a bit late with the anwser but I just wrote a pice of code that accomplices that:

    if ($('your selector').height() > 50) {
        var words = $('your selector').html().split(/\s+/);
        words.push('...');

        do {
            words.splice(-2, 1);
            $('your selector').html( words.join(' ') );
        } while($('your selector').height() > 50);
    }

and of course you should save the jQuery selector in a variable so you don't query the DOM every time.

回答3:

Found this:

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

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

回答4:

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.

回答5:

when you'll be allowed to use jQuery you could see the dotdotdot plugin at this link.. very simple to use and it works great!

For the moment i can suggest you to have a look at this fiddle! whould work the text-overflow: ellipsis

回答6:

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.

回答7:

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

回答8:

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.

回答9:

Displaying the ellipsis needs to be handled differently when the width of container is fixed and percentage.

When width of container is fixed

    .nooverflow{
        display: inline-block;
        overflow: hidden;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

When width of container is in percentage or auto, in this scenario define another tag in that container to render the text and specify width as 0 and min-width as 100%, that way it will take the width of container and show the ellipsis. Below is the LESS class to be used:

    .nooverflow{
        display: inline-block;
        overflow: hidden!important;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap!important;
        width: 0;
        min-width: 100%;
    }

来源：https://stackoverflow.com/questions/11665229/css-word-ellipsis-after-one-or-two-lines

标签

javascript

html

css

ellipsis