Vraag Breek een lang woord in een tabelcel met een percentage breedte


http://jsfiddle.net/L2yLe/

De viool zegt alles. Ik wil een css-only oplossing die de breedte van de tabel beperkt tot de breedte van de div. De lange reeks moet worden verbroken (maar zoals u kunt zien is dit niet het geval), waardoor de tabel overloopt.

Ik wil geen pixelbreedtes gebruiken. Dit moet volledig vloeiend zijn.

<div>
<table>
    <tr>
        <td>
            short string
        </td>
        <td>
somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata
        </td>
        <td>
            short string
        </td>
    </tr>
</table>
</div>

div {
    width: 50%;
    background-color: darkgray;
    padding: 15px;
    margin: 10px auto;
}
table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}

20
2018-02-16 15:41


oorsprong


antwoorden:


Jongens kijken even verder http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
   -ms-word-break: break-all;
   word-break: break-all;

   /* Non standard for webkit */
   word-break: break-word;

   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;

26
2018-06-07 11:12



Schrijf dit:

table {
border-collapse: collapse;
    table-layout: fixed;
    width:100%
}
td {
    border: 1px solid black;
    word-wrap:break-word;
}

Controleer dit: http://jsfiddle.net/L2yLe/7/


10
2018-02-16 16:06



Toevoegen "word-break: break-all;" zal werken!

Zie dit Voorbeeld.


2
2017-09-06 10:05



Er is een CSS3-eigenschap: word-wrap: break-word;... ofc waarvoor de browser CSS3-ondersteuning nodig heeft.


1
2018-02-16 16:02



Ik speel hier al een tijdje mee, en het is helemaal niet gemakkelijk.

Ik heb de lange tekst in een div geplaatst en een woord ingepakt, maar de TD-cel ging nog steeds naar de volledige breedte, hoewel de div de tekst wraped.

Ik heb een oplossing maar het is nogal wat om toe te voegen, dus op een multi-rij tafel zou waarschijnlijk overdreven groot zijn, ik zal hier plaatsen voor het geval iemand anders het kan verbeteren, ik ben geen middel tot HTML-ontwikkelaar en ben net begonnen mijzelf te vertroetelen , maar hier gaat het

gemengde tafel oplossing

Ik heb de grote tekst in een andere tabel in de oorspronkelijke td gezet en die tabel opgemaakt: lay-out; breedte 100%. heeft ook een rand toegevoegd om te laten zien wat er aan de hand is. Het is een beetje koevoet ik hoop dat iemand anders het kan verbeteren.


1
2018-02-16 16:39



Mijn oplossing is een beetje lelijk. maar het werkt echt goed. Ofwel met behulp van JS of wat je html ook uitzendt, je kunt het zetten <wbr> tussen elke X-tekens tekst. Hiermee kan de browser beslissen wanneer de woorden moeten worden afgebroken, maar visueel gezien zal deze als één tekenreeks verschijnen als deze in de tabelcel past.


1
2018-02-20 03:08



Ik denk niet dat het mogelijk is om het woord te breken met css. U kunt het aantal tekens berekenen bij het ophalen van de gegevens en vervolgens span-tags invoegen rond secties van de tekst als deze een vooraf bepaald aantal opeenvolgende niet-brekende tekens overschrijden. De standaardweergave van browsers plaatst dan de inline-reeksen naast elkaar als er voldoende ruimte is, of breek op de volgende regel als dit niet het geval is.


0
2018-02-16 17:06