Today I'm going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
CSS: Word-Wrap Property (view demo)
You can specify either normal or break-word value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line.
.break-word {
word-wrap: break-word;
}
i’d like to know how to shorten long texts?
You need to use the following:
/* Text overflow with ellipsis */
.ellipsis {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
This will only work in modern browsers. If older support is needed you’ll need to create a function in your relevant programming language.
For PHP, refer here: http://snippets.jc21.com/snippets/php/truncate-a-long-string-and-add-ellipsis/
very useful property
Am besten ist es teilnehmen in einen Wettbewerb für wahrscheinlich die größte Blogs im Internet. Ich werde Anwalt dieser site
thankyou very much, just what I needed!
ghghsrtyehtyrtttttttttytfryrdggfhgxfrutyisdyisujjjyy
I think it is very useful but width fix problem. So any solution?
yrytryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
Excellent thank you once again!
jiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiijjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
Is it possible to have the wrapped text (second line) to be right aligned
This is for
testing
I want
This is for
Testing
It should be possible Sarang
I think that is
Depends on if this worked
or not
But if this is all over the place justified
Then it worked
I think it is very useful but your are type some ex. text:-(aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa) internet browser problem. So any solution?
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
Unfortunately its not working in Firefox 8.0 :( or i did something wrong. Is it already standard in CSS3?
yes it worked for me.
thankyou.
http://t2.gstatic.com/images?q=tbn:ANd9GcSkKJ164dUqdjT2pCyS_DkAzZTq_Qy2SaXtN2ZGgib2iGv2mqSxHOkifkw1
you saved my day. thank you!
Really helpful, many thanks.
I’ve tested. It works on Firefox 10 and IE 9, but not on Chrome.
I googled and found a solution:
.break-word {
word-wrap: break-word; /* Firefox & IE */
word-break: break-all; /* Chrome */
}
Wow, great and useful. Thank you.
Thanks man for your help.