Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 690
user349072 Avatar asked Jul 26 '12 08:07

user349072


People also ask

How do I add ellipsis to text in CSS?

To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.

How do you make an ellipsis CSS?

Draw a simple rectangle. Your choice of height and width , of the rectangle, will dictate the size and shape of the ellipse. The border-radius refers to the curvature at the corners of the ​shape; it should be set to a very high value (50% to 100%). An ellipse has been created!

How do you break a single line paragraph into two lines in CSS?

We use the word–break property in CSS that is used to specify how a word should be broken or split when reaching the end of a line. The word–wrap property is used to split/break long words and wrap them into the next line.


1 Answers

Found this:

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

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

like image 190
Mouscellaneous Avatar answered Sep 23 '22 10:09

Mouscellaneous