CSS -, Text-overflows aus der Tabelle Zelle

Arbeite ich auf der Virtuellen Maschine, so kann ich nicht kopieren Sie den code... ich werde die screens dann. Problem ist trivial, aber ich Schätze, ich kann damit nicht umgehen... bitte geben Sie mir einige Vorschläge:

Tabelle code:
https://dl.dropboxusercontent.com/u/108321090/WWW1.png

CSS-code und der Anblick der website:
https://dl.dropboxusercontent.com/u/108321090/WWW.png

So im Allgemeinen, wie Sie sehen können, auf den 2. link, wird der text in der Zeile und es will nicht ot wickeln, es ist, wie lane die ganze Zeit und geht aus der Tabelle Spalte Grenze.

InformationsquelleAutor F1sher | 2013-06-26

  1. 25

    Illustratives Beispiel

    Angenommen, Sie haben eine einfache zwei-Zeilen-Tabelle mit zwei Zellen pro Zeile:

    <table>
    <tr>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td>Tiny text</td>
        <td>VeryLongNonBreakingLineOfTextThatNeedsToWrap</td>
    </tr>    
</table>

    Einer der Zellen ist ein sehr langes Wort, keine Leerzeichen, keine Bindestriche, so wird es nicht brechen.

    Hier einige CSS: 

    table {
    border: 1px solid lightgray;
}
table th {
    background-color: silver;
    text-align: center;
    padding: 10px;
}
table td {
    width: 200px;
    border: 1px dotted silver;
    word-break: break-all;
}

    Die Zellen haben eine Feste Breite von 200px. Jedoch, wegen der langen non-breaking Wort, es können zwei Dinge passieren.

    (1) Der Tabelle erhöhen kann die Breite der Spalte, um Platz für den langen text.

    (2) kann Der text flow aus der einen Zelle in Abhängigkeit von anderen Faktoren, wie die Verwendung eines fixed-layout mit einer angegebenen Tabelle, Breite.

    Wenn Sie sich bewerben word-break: break-all in die Zellen der Tabelle, der text wird umbrochen und die Spalten der Tabelle behalten Ihre vordefinierten breiten.

    Siehe demo unter: http://jsfiddle.net/audetwebdesign/xtKLE/

    Referenz

    Erfahren Sie mehr über die CSS3-word-break-Eigenschaft: http://www.w3.org/TR/css3-text/#word-break

    Gearbeitet deine Antwort @Marc Audet . Ich danke Ihnen so sehr

    InformationsquelleAutor Marc Audet

Schreibe einen Kommentar