Interrompe parola lunga nella cella della tabella con ampiezze percentuali

http://jsfiddle.net/L2yLe/Interrompe parola lunga nella cella della tabella con ampiezze percentuali

Il violino dice tutto. Voglio una soluzione solo CSS che limiti la larghezza della tabella alla larghezza del div. La lunga stringa dovrebbe essere interrotta (ma come puoi vedere non lo è), e ciò causa il trabocco della tabella.

Non voglio usare larghezze di pixel. Questo dovrebbe essere completamente fluido.

<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; 
}

fonte

2012-02-16 Explosion Pills

È possibile impostare div su 'overflow: hidden'. Ciò manterrà l'area visibile della tabella alla larghezza giusta, ma il contenuto continuerà a traboccare e sarà solo nascosto. Non sono sicuro che quello che stai chiedendo sia possibile. – Jeff

@Jeff potrebbe non essere, stavo solo controllando. Ho bisogno che il contenuto sia visibile, sfortunatamente. –

Ragazzi un'occhiata su 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;

fonte

2012-06-07 11:12:41

Perfetto, grazie :) – ConorLuddy

Non siamo in grado di vedere il collegamento nella rete dell'ufficio, per favore pubblica un po 'di codice invece di link. :( –

Non funziona in Presto – Andrey

C'è una proprietà CSS3: word-wrap: break-word; ... ofc che richiede che il browser per avere il supporto CSS3.

fonte

2012-02-16 16:02:04 crush

Questo non funziona. Prova a modificare il violino. –

'word-wrap: break-word' funziona solo con le larghezze di pixel impostate. Ho modificato il violino e l'ho trovato rapidamente. –

scrivere questo:

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

Controllare questo: http://jsfiddle.net/L2yLe/7/

fonte

2012-02-16 16:06:47 sandeep

Funziona molto bene, ma l'unico problema è che voglio che certe colonne siano più larghe di altre. Il layout fisso della tabella non ti consente di ridimensionare le colonne, nemmeno con le larghezze dei pixel. –

ho giocato arround con questo per un po ', e la sua non prova affatto facile.

Ho inserito il testo lungo in un div e in una parola racchiusa, ma la cella TD ha comunque raggiunto l'intera larghezza anche se il div ha avvolto il testo.

Ho una soluzione, ma è piuttosto molto da aggiungere ad una tabella multi riga probabilmente non eccessiva, metterò qui nel caso in cui qualcun altro può migliorare su di esso, io non sono uno sviluppatore HTML e ho solo ha iniziato a dilettarsi me stesso, ma qui va

mixed table solution

ho messo il testo di grandi dimensioni in un'altra tabella all'interno del td originale e impostare tale tabella per il layout: fixed; larghezza 100%. anche aggiunto il bordo per mostrare che cosa sta succedendo. È un po 'piede di porco spero che qualcun altro possa migliorarlo.

fonte

2012-02-16 16:39:26 Dampsquid

Non credo sia possibile rompere la parola usando css. Sarai in grado di calcolare il numero di caratteri durante il recupero dei dati e quindi inserire tag span attorno a sezioni del testo se supera un numero predeterminato di caratteri consecutivi non interrotti. Il rendering predefinito dei browser posizionerebbe quindi gli intervalli in linea l'uno accanto all'altro se vi è spazio sufficiente o si interromperà sulla riga successiva se non c'è.

fonte

2012-02-16 17:06:25 Evert

La mia soluzione è un po 'brutta. ma funziona davvero bene. Sia usando JS o qualunque cosa stia emettendo il tuo html, puoi inserire <wbr> tra ogni X caratteri di testo. Questo lascia decidere al browser quando interrompere le parole, ma visivamente, apparirà come una stringa se si adatta alla cella della tabella.

fonte

2012-02-20 03:08:55

Aggiungendo "word-break: break-all;" funzionerà!

Vedere questo Example.

fonte

2017-09-06 10:05:12 User1793

Interrompe parola lunga nella cella della tabella con ampiezze percentuali

risposta

Problemi correlati