How can I word wrap this list item in Firefox 11?

Question

I have html like:

<fieldset>
  <div>
    <ul>
      <li class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.  </li>
    </ul>
  </div>
</fieldset>​

and Css like

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

How it looks in Chrome(Desired Outcome):

How it looks in Firefox(Problematic outcome):

JsFiddle Demo How can I achieve the word-wrapping displayed via Chrome in Firefox, by just adjusting CSS?

Answer 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;
}​

Answer 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