Limit Amount of Words In a Div [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 8 years ago.

Improve this question

Here is where the 3 boxes are. All of them share the same amount of characters. Inside the boxes I need the text to be limited so that If the user insert more text, the last word is followed by ... preventing the content to override the box.

I've already tried with text-overflow: ellipsis;

But I believe I'm using it wrong. As If I add more text to each box, the text overrides the box.

Answer 1

text-overflow: ellipsis only works with the following combination: fixed width, overflow hidden and white-space: nowrap; the elipssis does not work with mulitple lines.

You should use something like this: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Single line example: Fiddle

.ellipsis {
    text-overflow: ellipsis;
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
}

Answer 2

text-overflow will only have an effect if the white-space: nowrap is set which means you cannot use it to truncate text which is more than one line.

This means you're stuck with truncating the text on the server or using javascript. There are a few good jQuery plugins out there for this, something like dot dot dot should do the trick.