Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make Firefox word-break with CSS?

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?

like image 590
zjm1126 Avatar asked Nov 26 '10 05:11

zjm1126


People also ask

How do you make a word break in 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 .

How do you automatically break text in CSS?

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.

How do you force text break in CSS?

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.

How do I fix word break in CSS?

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.


Video Answer


2 Answers

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

like image 173
Swadesh Behera Avatar answered Oct 04 '22 05:10

Swadesh Behera


Use the following rules together:

/* For Firefox */ white-space: pre-wrap; word-break: break-all;  /* For Chrome and IE */ word-wrap: break-word; 
like image 27
gsklee Avatar answered Oct 04 '22 05:10

gsklee