CSS: IE: white-space: nowrap funktioniert nicht

IE nicht richtig reagiert zu nowrap CSS-Attribut.

Frage: Wie Mach ich das im IE funktioniert, so dass es macht als Chrome rendering-Ergebnis.

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

Wie kann ich machen also die Tabelle Rendern, wie Chrom tut? Sauberste Lösung?

Danke für deine Hilfe vor der Zeit!

  • Sie sollten angeben, welche version(en) des IE auf die Sie sich beziehen und wie der IE das nicht, was Ihr bittet.
  • IE 9 und höher.
  • Ich habe Schwierigkeiten mit IE10 vor kurzem, und es scheint, müssen die css-Regel word-wrap: normal zu vermeiden wraping
InformationsquelleAutor subsari | 2015-01-02
  1. 4

    Ist das Problem nicht mit white-space: nowrap (der text bleibt auf einer Linie), aber mit der max-width Einstellung. Obwohl es in der Regel unterstützt sogar von IE-7, IE 7 scheint ein Problem mit ihm haben, wenn angewandt auf eine Zelle in der Tabelle, wie auch einige andere Merkwürdigkeiten. (Meine Beobachtungen basieren auf der Verwendung von IE 11 in verschiedenen emulation Modi, nicht wirklich testen, auf ältere Versionen von IE.)

    Wenn Unterstützung von IE 7 (und älter) ist wichtig genug ist, sollten Sie erwägen Einstellung von Breite auf die Inhalte eher als maximale Breite. Um dann wickeln Sie die lange Zeichenfolge in einen container, und legen Sie die Breite auf Sie, anstatt Sie auf die Zelle in der Tabelle. Sie zusätzlich benötigen, um overflow: hidden auf, dass der Behälter (sonst wird das überlaufende Inhalte noch macht die Zelle breiter ist). Beispiel:

    CSS:

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

    HTML:

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

    • Dies ist definitiv geklappt! Danke für die ausführliche Erklärung und saubere Lösung--sehr geschätzt.
    InformationsquelleAutor Jukka K. Korpela
  2. 0

    Den white-space: nowrap Eigenschaft sollte in Ordnung sein, um die Verwendung in Internet Explorer, gehen den ganzen Weg zurück zu 5.5

    http://css-tricks.com/almanac/properties/w/whitespace/#browser-support

    Kann es etwas damit zu tun haben, die bestimmte Kopie des IE, die Sie ausführen möchten. Versuchen Sie !important zum Ende der white-space: nowrap Erklärung, dass es keine plugins oder user-agent-Stylesheets, die in Konflikt mit Ihrem code.

    • Jukka K. Korpela vorgeschlagen, dass es ist kein Problem mit white-space: sondern mit max-width. Trotzdem danke!
    InformationsquelleAutor MrPickle
Schreibe einen Kommentar