This is my code so far:
<div style="width:100px;height:100px;background:red"> ssssssssssssssssssssssssssssssssssssss </div>
However,
word-wrap:break-word; word-break:break-all;
does not prove useful, since it can't word-wrap on Firefox. What can I do, using CSS?
Use the default line break rule. To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text). Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal .
The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.
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.
For English and many other languages, the correct breaking means hyphenation, with a hyphen added at the end of a line when a break occurs. In CSS, you can use hyphens: auto , though you mostly still need to duplicate it using vendor prefixes.
white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ width:200px;
The above piece of code works for me wonderfully
Use the following rules together:
/* For Firefox */ white-space: pre-wrap; word-break: break-all; /* For Chrome and IE */ word-wrap: break-word;
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