How Can I Word Wrap This List Item In Firefox 11?

I have html like:

• This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The

Solution 1:

This works for me.

fieldset
{
  max-width : 1em;
  width: 1em;
  border:1px solid #000000;
}
li
{
  max-width:1em;
  width:1em;
  word-wrap:break-word;
}​

Either do not use inherit on li or do a inherit on both its parent div and ul

fieldset
{
  max-width : 1em;
  width: 1em;
  border:1px solid #000000;
}

fieldset > div{
width:inherit;
}
fieldset > div > ul{
width:inherit;
}

li
{
  max-width:inherit;
  width:inherit;
  word-wrap:break-word;
}​

Solution 2:

You must specify the width for the li as well, as with FF it does not accept the 1em inherit width. If you specify width:1em; in the li CSS, you will get the desired result in FF. Perhaps if you do not want to make every li that size, make it a class.

See updated JS Fiddle

Share