Zeilenumbruch in einer HTML-Tabelle

Question

Ich habe mit word-wrap: break-word um Text einzuschließen div s und span s. In Tabellenzellen scheint es jedoch nicht zu funktionieren. Ich habe eine Tabelle eingestellt auf width:100% mit einer Zeile und zwei Spalten. Text in Spalten, obwohl mit dem obigen Stil versehen word-wrap nicht verpackt. Dadurch wird der Text über die Grenzen der Zelle hinausgeschoben. Dies geschieht in Firefox, Google Chrome und Internet Explorer.

So sieht die Quelle aus:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Das lange Wort oben ist größer als der Rahmen meiner Seite, aber es bricht nicht mit dem obigen HTML. Ich habe die folgenden Vorschläge ausprobiert, indem ich Folgendes hinzugefügt habe text-wrap:suppress y text-wrap:normal aber beides hat nicht geholfen.

Answer 1

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Answer 2

Gemeinsame verwirrend Problem hier ist, dass wir 2 verschiedene css-Eigenschaften haben: word-wrap y word-break . Darüber hinaus verfügt word-wrap über eine Option namens break-word .. Leicht zu verwechseln :-)

Normalerweise hat das bei mir funktioniert, sogar innerhalb eines Tisches: word-break: break-word;

Answer 3

Wenn Sie keinen Tabellenrand benötigen, verwenden Sie diesen:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Answer 4

Das könnte helfen,

css

.wrap-me{
  word-break: break-all !important;
}

<table>
    <thead>
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
        <td>Col 5</td>
        <td>Col 6</td>
        <td>Col 7</td>
    </tr>
    </thead>
    <tbody>
    <tr>            <td class="wrap-me">tesetonlywithoutspacetesetonlywithoutspacetesetonlywithoutspace</td>
        <td class="wrap-me">test only</td>
        <td class="wrap-me">test with space long text</td>
        <td class="wrap-me">Col 4</td>
        <td class="wrap-me">Col 5</td>
        <td class="wrap-me">Col 6</td>
        <td class="wrap-me">Col 7</td>
    </tr>
    <tr>            
        <td class="wrap-me">test only</td>
        <td class="wrap-me">test only</td>
        <td class="wrap-me">test with space long text</td>
        <td class="wrap-me">testwithoutspacetestonlylongtext</td>
        <td class="wrap-me">Col 5</td>
        <td class="wrap-me">Col 6</td>
        <td class="wrap-me">Col 7</td>
    </tr>
    </tbody>
</table>

Answer 5

Ich habe eine Lösung gefunden, die in Firefox, Google Chrome und Internet Explorer 7-9 zu funktionieren scheint. Für ein zweispaltiges Tabellenlayout mit langem Text auf der einen Seite. Ich habe überall nach ähnlichen Problemen gesucht, und was in einem Browser funktionierte, brach im anderen, oder das Hinzufügen von mehr Tags zu einer Tabelle scheint einfach wie schlechte Codierung.

Ich habe dafür KEINE Tabelle verwendet. DL DT DD ist die Rettung. Zumindest für die Fixierung eines zweispaltigen Layouts, das im Grunde ein Glossar/Wörterbuch/Wortbedeutungsaufbau ist.

Und ein allgemeines Styling.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

Mit fließendem Zeilenumbruch und Rand links habe ich genau das bekommen, was ich brauchte. Ich dachte nur, ich würde dies mit anderen teilen, vielleicht wird es jemand anderes mit einem zweispaltigen Definition Stil Layout helfen, mit Schwierigkeiten immer die Worte zu umbrechen.

Ich habe versucht, den Zeilenumbruch in der Tabellenzelle zu verwenden, aber es funktionierte nur im Internet Explorer 9 (und natürlich in Firefox und Google Chrome), wobei ich hauptsächlich versuchte, den kaputten Internet Explorer-Browser hier zu reparieren.