webentwicklung-frage-antwort-db.com.de

Tabellenzellenbreiten - Breite festlegen, lange Wörter umbrechen / abschneiden

Ich habe eine Tabelle, die Zellen mit unterschiedlich langem Text enthält. Es ist wichtig, dass alle Tabellenzellen die gleiche Breite haben. Wenn dies bedeutet, lange Wörter abzuschneiden oder einen Umbruch in langen Wörtern zu erzwingen, ist das in Ordnung.

Ich kann nicht herausfinden, wie ich das zum Laufen bringen kann.

Dies ist für eine interne Client-Anwendung gedacht und muss nur in IE6 und IE7 funktionieren.

Eine Beispielseite ist unten. Die Zelle, die onereallylongword enthält, ist die beleidigende.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; }
    </style>
</head>
<body>
    <table border="2">
        <tr>
            <td>Word</td>
            <td>two words</td>
            <td>onereallylongword</td>
        </tr>
    </table>
</body>
</html>
37
Richard Everett

Stack Overflow hat ein ähnliches Problem mit langen Codezeilen gelöst, indem ein DIV verwendet wurde und overflow-x:auto. CSS kann keine Wörter für Sie trennen.

Solange Sie die Breite der Tabelle selbst festlegen und die Tabellenlayout-Eigenschaft festlegen, ist dies ziemlich einfach:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; overflow: hidden; }
        table { width : 90px; table-layout: fixed; }
    </style>
</head>
<body>

    <table border="2">
        <tr>
            <td>Word</td>
            <td>two words</td>
            <td>onereallylongword</td>

        </tr>
    </table>
</body>
</html>

Ich habe dies in IE6 und 7 getestet und es scheint gut zu funktionieren.

35
inferis

Wenn Sie den langen Text korrekt in neue Zeilen setzen möchten, verwenden Sie in Ihrem Tabellen-ID-Aufruf eine CSS-Eigenschaft table-layout:fixed; andernfalls kann css den langen Text in neuen Zeilen nicht umbrechen.

20
Katie

Versuche dies:

text-overflow: Ellipsis; 
overflow: hidden; 
white-space:nowrap;
10
Anupam

Mir ist klar, dass Sie eine Lösung für IE6/7 brauchten, aber ich werfe dies nur für irgendjemanden anderen aus.

Wenn Sie table-layout: fixed Nicht verwenden können und sich nicht um IE <9 kümmern, funktioniert dies für alle Browser.

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}
2
shrimpwagon
<style type="text/css">
td { Word-wrap: break-Word;max-width:50px; }            
</style>
2
Mukund