110 views

Word-wrap in een HTML-tabel

Hosted by Code Expert
html

Ik gebruik word-wrap: break-wordom tekst terug te laten lopen in divs en spans. Het lijkt echter niet te werken in tabelcellen. Ik heb een tabel ingesteld op width:100%, met één rij en twee kolommen. Tekst in kolommen, hoewel opgemaakt met de bovenstaande word-wrap, loopt niet terug. Het zorgt ervoor dat de tekst de grenzen van de cel overschrijdt. Dit gebeurt in Firefox, Google Chrome en Internet Explorer.

Zo ziet de bron eruit:

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>

Antwoord 1, autoriteit 100%

Het volgende werkt voor mij in Internet Explorer. Let op de toevoeging van het table-layout:fixedCSS-kenmerk

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

Antwoord 2, Autoriteit 28% 

<td style="word-break:break-all;">longtextwithoutspace</td>

of 

<span style="word-break:break-all;">longtextwithoutspace</span>

Antwoord 3, Autoriteit 21%

een lang schot, maar dubbel-check met firebug (of vergelijkbaar) dat u de volgende regel niet per ongeluk valt: 

white-space:nowrap;

Dit kan uw opgegeven lijnbraakgedrag overschrijven.

Antwoord 4, Autoriteit 8%

blijkt er geen goede manier om dit te doen. Het dichtst bij me kwam is het toevoegen van “Overflow: verborgen;” naar de div rond de tafel en het verliezen van de tekst.
De echte oplossing lijkt echter te zijn om te slikken. Het gebruik van DIV’s en relatieve positionering was in staat om hetzelfde effect te bereiken, minus de erfenis van <table>

2015 Update: Dit is voor degenen zoals ik die dit antwoord wil. Na 6 jaar werkt dit, dankzij alle bijdragers. 

* { /* this works for all but td */
  word-wrap:break-word;
}
table { /* this somehow makes it work for td */
  table-layout:fixed;
  width:100%;
}

Antwoord 5, autoriteit 5%

Zoals gezegd werkt het plaatsen van de tekst in divbijna. Je hoeft alleen maar de widthvan de divop te geven, wat gunstig is voor lay-outs die statisch zijn.

Dit werkt op FF 3.6, IE 8, Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Antwoord 6, autoriteit 3%

Probleem met

<td style="word-break:break-all;">longtextwithoutspace</td>

is dat het niet zo goed werkt als tekst een paar spaties heeft, bijvoorbeeld

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Als het woord andthenlongerwithoutspacesop één regel in de tabelcel past, maar long text with andthenlongerwithoutspacesniet, wordt het lange woord in tweeën gesplitst in plaats van te worden ingepakt.

Alternatieve oplossing: voeg U+200B (ZWSP), U+00AD (zacht koppelteken)
of U+200C (ZWNJ) in elk lang woord na elke, zeg, 20e karakter (zie echter waarschuwing hieronder):

td {
  border: 1px solid;
}
<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Antwoord 7, autoriteit 3%

Tussenoplossing die overflow-wrap gebruikt en prima werkt met normale tafelindeling + tafelbreedte 100%

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}
table{
  width:100%; /*must be set (to any value)*/
}
.overflow-wrap-hack{
  max-width:1px;
}

Voordelen:

  • maakt gebruik van overflow-wrap:break-wordin plaats van word-break:break-all. Dat is beter omdat het eerst op spaties probeert te breken, en het woord alleen afsnijdt als het woord groter is dan de container.
  • NO table-layout:fixednodig. Gebruik uw normale automatische formulering.
  • Niet nodig om vaste widthof vaste max-widthin pixels te definiëren. Definieer %van de ouder indien nodig.

Getest in FF57, Chrome62, IE11, Safari11

Antwoord 8, Autoriteit 3%

Wijzig uw code 

word-wrap: break-word;

Naar 

word-break:break-all;

Voorbeeld 

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Antwoord 9, Autoriteit 2%

Uitchecken deze demo 

  <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Antwoord 10, autoriteit 2%

Getest in IE 8 en Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Hierdoor past de tabel in de breedte van de pagina en neemt elke kolom 50% van de breedte in beslag.

Als u liever heeft dat de eerste kolom meer van de pagina in beslag neemt, voegt u een width: 80%toe aan de tdzoals in het volgende voorbeeld, waarbij u 80% vervangt door het percentage van uw keuze.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Antwoord 11, Autoriteit 2%

Het enige dat moet worden gedaan is add breedte <td>of <div>in het <td>, afhankelijk van de indeling die u wilt bereiken.

bijvoorbeeld: 

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

of 

<table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

Antwoord 12

Het lijkt erop dat u nodig hebt om set word-wrap:break-word;op een blok element (div), met gespecificeerde (non relatief) breedte. Vb: 

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

Antwoord 13

Het antwoord dat de premie heeft gewonnen is correct, maar het werkt niet als de eerste rij van de tabel een samengevoegde/samengevoegde cel heeft(alle cellen krijgen dezelfde breedte).

In dit geval moet u de tags colgroupen colgebruiken om het correct weer te geven:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

Antwoord 14

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

Antwoord 15

ik heb alles geprobeerd, maar in mijn geval werkt het gewoon voor mij

white-space: pre-wrap;
word-wrap: break-word;

Antwoord 16

Dit werkt voor mij:

<style type="text/css">
    td {
        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

En tabelkenmerk is:

  table {
      table-layout: fixed;
      width: 100%
   }
</style>

Antwoord 17

Als u geen tabelrand nodig heeft, past u dit toe: 

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

Antwoord 18

Ik heb een oplossing gevonden die lijkt te werken in Firefox, Google Chrome en Internet Explorer 7-9. Voor het maken van een tabelindeling met twee kolommen met aan de ene kant lange tekst. Ik heb overal gezocht naar een soortgelijk probleem, en wat in de ene browser werkte, brak de andere, of het toevoegen van meer tags aan een tabel lijkt gewoon slechte codering.

Ik heb hier GEEN tabel voor gebruikt. DL DT DD te hulp. In ieder geval voor het maken van een lay-out met twee kolommen, dat is eigenlijk een woordenlijst/woordenlijst/woordbetekenis.

En wat generieke 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>

Antwoord 19

Gemeenschappelijke verwarringsprobleem Hier is dat we 2 verschillende CSS-eigenschappen hebben: word-wrapen word-break.
Daarna bovendien heeft Word-wrap een optie genaamd break-word.. Eenvoudig te mixen: -)

Meestal werkte dit voor mij, zelfs in een tafel:
word-break: break-word;

Antwoord 20

Ik heb hetzelfde probleem dit werk goed voor mij 

<style> 
      td{
            word-break: break-word;
      }
    </style>
    <table style="width: 100%;">
      <tr>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</td>
        <td><span style="display: inline;">Short word</span></td>
      </tr>
    </table>

Antwoord 21

Tables Wrap Standaard, dus zorg ervoor dat het display van de tabelcellen table-cell:

zijn

td {
   display: table-cell;
}

Antwoord 22

Dit kan helpen,

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>

Antwoord 23

style=”table-layout:fixed; width:98%; word-wrap:break-word” 

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Demo – http://jsfiddle.net/Ne4BR/749/

Dit werkte prima voor mij. Ik had lange links waardoor de tabel 100% zou overschrijden in webbrowsers.
Getest op IE, Chrome, Android en Safari.

Antwoord 24

Een oplossing die werkt met Google Chrome en Firefox (niet getest met Internet Explorer) is om display: table-cellin te stellen als een blokelement.

Antwoord 25

Je kunt dit proberen als het je uitkomt…

Zet een tekstgebied in je td en schakel het uit met de achtergrondkleur wit en definieer het aantal rijen.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Antwoord 26

Voeg gewoon breedte toe. Dit werkte voor mij.

    <td style="width:10%;"><strong>Item Name</strong></td>

Antwoord 27

Als je alleen om tekst geeft, kun je het doen zonder table-layout:fixed

<table>
<tr>
  <td>
    Title
  </td>
  <td>
    Length
  </td>
  <td>
    Action
  </td>
  </tr>
  <tr>
  <td>
    Long song name
  </td>
  <td>
    3:11
  </td>
  <td>
    <button>
    Buy Now!
    </button>
  </td>
</tr>
<tr>
  <td  colspan=3>
    <div style='width:200px;background-color:lime;margin-left:20px'>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>quick </div>
      <div style='float:left;white-space:pre'>brown </div>
      <div style='float:left;white-space:pre'>foxed </div>
      <div style='float:left;white-space:pre'>jumped </div>
      <div style='float:left;white-space:pre'>over </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>lazy </div>
      <div style='float:left;white-space:pre'>brown </div>
      <div style='float:left;white-space:pre'>cat </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
    </div>
  </td>
</tr>
  <tr>
  <td>
    Long song name1
  </td>
  <td>
    2:20
  </td>
  <td>
    <button>
    Buy Now!
    </button>
  </td>
</tr>
</table>
Previous articleWat is een user-agent-stylesheet?
Next articlehoe math.pi in java te gebruiken

Other episodes

Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

html Code Expert - 0
Ik herinner me dat ik een manier heb gezien om een ​​<input type="password" />te hebben, zodat de browser nietde gebruiker vraagt ​​om het wachtwoord...
Read more

VueJS/browser caching productie builds

html Code Expert - 0
Ik heb een VueJS-app. Telkens wanneer ik npm run builduitvoer, wordt er een nieuwe set dist/*-bestanden gemaakt, echter wanneer ik ze op de server...
Read more

Verhogingspijlen aanpassen bij invoer van typenummer met CSS

html Code Expert - 0
Ik heb een typenummer ingevoerd dat wordt weergegeven met de volgende code: <input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number"> Het ziet er zo uit: Ik zou...
Read more

Angular 4 img src is niet gevonden

html Code Expert - 0
Ik heb een probleem met het vinden van een afbeelding met hoek 4. Hij blijft me vertellen dat de afbeelding niet is gevonden. Mapstructuur: app_folder/ app_component/ ...
Read more

HTML-tags binnen <label>

html Code Expert - 0
Ik heb een tabel op een pagina die bestaat uit selectievakjes in de cellen aan de linkerkant en beschrijvingen in de cellen aan de...
Read more

Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

html Code Expert - 0
Nu de CSS-rasterlay-outmodule binnenkort in Firefox en Chrome wordt geleverd, dacht ik dat ik zou proberen te begrijpen hoe ik het moet gebruiken. Ik heb...
Read more

Angular 2 Hash (#) van de URL verwijderen

html Code Expert - 0
Ik probeer het #-teken van de url in Angular 2 te verwijderen, maar ik kon geen goede uitleg vinden over hoe ik het kan...
Read more

© Copyright - Code Expert 2021