word-wrap di celle di tabella che non funzionano con le barre

Sto provando a racchiudere il testo in un layout fisso ma non funziona quando il testo contiene barre.word-wrap di celle di tabella che non funzionano con le barre

Può essere risolto senza inserire spazi da Javascript (puro CSS)?

jsfiddle:

http://jsfiddle.net/HgBhk/1/

Not working: 
<div style="display:table; width:170px; background-color:cyan;"> 
    <div style="display:table-row"> 
     <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb/dfbfdbdfbfbf/bdffbdbfdfbddfbdfbdfb</div> 
     <div style="display:table-cell; width:34px; background-color:red;">xxxxx</div>   
    </div> 
</div> 

</br> 
Working: 
<div style="display:table; width:170px; background-color:cyan;"> 
    <div style="display:table-row"> 
     <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb dfbfdbdfbfbf bdffbdbfdfbddfbdfbdfb</div> 
     <div style="display:table-cell; width:34px; background-color:red;">xxxxx</div>   
    </div> 
</div>

fonte

2013-04-29 Bogdan M.

Perché stai utilizzando div per i dati tabulari? Usa TABLES..Funny world eh ~ le persone usano i div per i dati tabulari e le tabelle per i layout –

il motivo per cui il secondo caso funziona sono gli spazi, non l'assenza di barre. Se rimuovi gli spazi e hai una stringa lunga (come nel primo caso) non funzionerà neanche. – hexblot

Non sto usando le tabelle a causa delle prestazioni. So che c'è una lunga discussione su questo, pro e contro .. –

Aggiungere table-layout:fixed; al div-elemento "tavola" e assegnare una larghezza alla cella per renderlo rompere le linee:

JSFiddle

fonte

2013-04-29 11:47:38

sì, ma non voglio che sia corretto, voglio riempire lo spazio rimanente –

Quindi assegnare 'width: auto;', almeno dargli una qualche forma di larghezza :) [JSFiddle] (http: // jsfiddle. net/HgBhk/5 /) –

cool, grazie, accetterò la risposta –

Inserisci un tag <wbr> o uno spazio a larghezza zero  dopo ogni o ccurrence di una barra o di un altro carattere che dovrebbe essere trattato come se consentisse un'interruzione di linea diretta dopo di essa. La scelta tra queste alternative è un po 'complicated, ma dal momento che il tuo codice non riesce a funzionare su vecchie versioni di IE, potresti anche ignorarlo anche qui, e questo renderebbe  la scelta giusta. Cioè, dovresti scrivere per es.

abfdbfdbfdb/&#x200b;dfbfdbdfbfbf/&#x200b;bdffbdbfdfbddfbdfbdfb

Il problema è a livello di personaggio, non è una questione di stile.

Una stringa che non contiene caratteri di spazi vuoti è normalmente indivisibile nel wrapping e dovrebbe essere in questo modo, a meno che non sia possibile fare in modo che i browser interrompano correttamente i punti di rottura o la sillabazione e utilizzino la divisione di parole. Un'impostazione come word-wrap: break-word è pensata per casi eccezionali, interruzioni di emergenza quando non esiste un buon modo per controllare il wrapping e occorre evitare l'overflow.

fonte

2013-04-29 13:02:00

questo significa che devo cambiare il testo ... con javscript, giusto? la domanda iniziale era come fare, senza JS, in più non ho bisogno della sillabazione sui percorsi. Penso che la risposta sia un po 'fuori tema –

Dipende dal contesto in cui è possibile modificare il documento HTML. La modifica * è * il modo giusto per gestire correttamente il wrapping (se è necessario il wrapping, nella maggior parte dei casi quando le persone inseriscono lunghi nomi di percorsi o URL in contenuti visibili, dovrebbero usare qualcosa di più normale, come i nomi brevi). I percorsi non dovrebbero essere sillabati, naturalmente; al contrario, dovresti assicurarti che non vengano divisi dopo "-" se un tale personaggio appare lì. I CSS * non possono * gestire cose come questa (ora o nel prossimo futuro). –

Hai salvato la mia giornata! Grazie! – shaosh

word-wrap di celle di tabella che non funzionano con le barre

risposta

Problemi correlati