CSS: IE: white-space: nowrap not working

css internet-explorer overflow nowrap

15,262

The issue is not with white-space: nowrap (the text stays on one line) but with the max-width setting. Although it is generally supported even by IE 7, IE 7 seems to have an issue with it when applied to a table cell, as well as some other oddities. (My observations are based on using IE 11 in different emulation modes, not actually testing on older versions of IE.)

If supporting IE 7 (and older) is important enough, you might consider setting specific width on the content rather than maximum width. To would then need to wrap the long string in a container and set width on it rather than on the table cell. You additionally need to set overflow: hidden on that container (otherwise the overflowing content still makes the cell wider). Example:

th {
    border: 1px solid red;
}
td {
    border: 1px solid black;
}
.long_string {
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    color: #FFA500;
}

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td><div class="long_string">Data 1 with long text</div></td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
</table>

15,262

subsari

Updated on September 15, 2022

Comments

subsari over 1 year

IE not properly responding to nowrap CSS attribute.

Question: How do I make this work in IE so that it renders as Chrome's rendering result.

http://jsfiddle.net/subsari/tmz0t0z2/3/

<body>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td class="long_string">Data 1 with long text</td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
</table>

th {
border: 1px solid red;
}
td {
    border: 1px solid black;
}
.long_string {
    white-space: normal;
    white-space: nowrap;
    max-width: 100px;
    color: #FFA500;
}

How can I make IE render the table like Chrome does? Cleanest solution?

Thank you for your help ahead of time!

subsari over 9 years

This definitely worked! Thank you for the detailed explanation and clean solution--greatly appreciated.
subsari over 9 years

Jukka K. Korpela suggested that it is not an issue with white-space: but rather with max-width. Thanks though!