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.
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.
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!
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.
Found this:
http://codepen.io/martinwolf/pen/qlFdp
Looks like -webkit-line-clamp
works in some browsers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With