Stop text wrapping in lists

Answer 1

li { white-space:nowrap; }

Answer 2

li { white-space: nowrap; }

This will allow the text to show on the same line. It may cause other things to expand horizontally as well.

li { overflow: hidden; }

Probably not relevant in this case, but it will hide any text beyond the fixed width of the LI element.

Also see break-word:

li { word-wrap: break-word }

I think this selector has some problems in IE though.

Answer 3

The problem is that list-style-position:inside "Indents the marker and the text". So you'll never achieve what you are trying to do using it. (http://www.w3schools.com/CSS/pr_list-style-position.asp) So you're only choice is list-style-position:outside.

If your issue is that some lists can have up to 9 items (1 digit), others have up to 99 items (2 digits), and still others have up to 999 items (3 digits), etc. I would say that you have 2 choices:

Option 1: create a different class for each list (assuming you know the count ahead of time). Maybe call them digits1, digits2, digits3, etc. So for 1 digit lists, you would use:

<ol class='digits1'>
  <li>item</li>
  ...
</ol>

Option 2: Abandon lists altogether and just use tables (I know ugh). But you would guarantee proper wrapping and indentation no matter how many items are in the list.

Answer 4

Using list-style-position:outside; would be more doable if you were using an unordered list, which would always take the same amount of space for the marker. Since you are using an ordered list, I would stick with list-style-position:inside;. The problem, as you've discovered, is that IE and Firefox make the same amount of space for the marker irregardless of the number of digits in the marker or the size of the font. So you need to take matters into your own hands by creating the space yourself. The trick here is to know that, by default, IE and Firefox use different properties to create the space. IE uses margin on the <ol> (30 points) while Firefox uses padding (40 pixels), so you'll have to reset both of these values to achieve cross-browser happiness.

Try this:

ol {
    margin-left: 0;
    padding-left: 3em;
    list-style-position: outside;
}