Stop text wrapping in lists

Question

I have an ordered list:

<ol>
<li>They used to bring concerns about their children or their marriages. But increasingly parishioners are also telling Glen VanderKloot, a Lutheran minister in Springfield, Ill., about their financial worries, and that puts him in the unusual position of dispensing investment advice.</li>
<li>This is the Second g</li>
<li>This is the Third g</li>
<li>This is the fourth g</li>
<li> <strong>This is the fifth g</strong> </li>
<li>This is the seventh g</li>
<li>This is the eight g</li>
<li>This is the ninth g</li>
<li>This is the tenth g</li>
<li>This is the eleventh g</li>
<li>This is the twelvth g</li>
</ol>

It appears as follows:

1.  They used to bring concerns about their children or their marriages. But
    increasingly parishioners are also telling Glen VanderKloot, a Lutheran
    minister in Springfield, Ill., about their financial worries, and that puts
    him in the unusual position of dispensing investment advice.
2.  This is the Second g
3.  This is the Third g
4.  This is the fourth g
5.  This is the fifth g
6.  This is the seventh g
7.  This is the eight g
8.  This is the ninth g
9.  This is the tenth g
10. This is the eleventh g
11. This is the twelvth g

When I have a lot of text like the first item, I want it to be formatted like above. I was able to accomplish this by setting:

list-style-position:outside;

and adjusting some margins on the li and ol tags. However, this had some adverse effects when I had double and triple digits. I had to use these margins as in IE the numbers were being cut off. I would like to be able to go back to use a list-style-position of inside and remove the margins but the text wraps under the number which is not what I want.

Does anyone know how to turn off this wrapping?

Solution 1

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

Solution 2

Try this:

li { 
  white-space:nowrap;
}

Solution 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.

Solution 4

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.

View more solutions