Come imitare l'interruzione di parole: break-word; per IE9, IE11 e Firefox

Come imitare word-break: break-word; per IE9, IE11 e Firefox?Come imitare l'interruzione di parole: break-word; per IE9, IE11 e Firefox

Sembra funzionare in Chrome. Ho appreso e capito che è un non-standard, solo webkit.

FYI, ho provato ad utilizzare,

white-space: pre-wrap;

E un po 'come,

overflow-wrap: break-word;

provato anche il CSS di seguito menzionato,

word-wrap: break-word; 
word-break: break-word;

Ma queste non sembrano lavorare.

non posso fornire larghezza fissa a campata (che contiene il testo) rendendolo display: block; esplicitamente come il testo è dinamico e differisce secondo Geo-posizione dell'utente. Attualmente supportiamo circa 18 lingue.

Questo è come il codice sembra,

il codice HTML,

<div id="grid2"> 
    <span id="theSpan">Product Support</span> 
</div>

Il CSS,

#theSpan{ 
    white-space: pre-wrap;  /* CSS3 */ 
    white-space: -moz-pre-wrap; /* Firefox */  
    white-space: -pre-wrap;  /* Opera 7 */ 
    white-space: -o-pre-wrap; /* Opera 7 */  
    word-wrap: break-word;  /* IE */ 
    word-break: break-all; 
} 

#grid2{ 
    width: 100px; 
}

Ecco come si presenta,

io voglio che sia come,

Si prega di notare:
Ho dovuto usare word-break: break-all; come per alcune delle lingue del testo tradotto è troppo lungo e che trabocca fuori della griglia . Il testo "Supporto prodotto" è dinamico.

Aggiornamento:
Ho una larghezza fissa per il div con id, Griglia2. In una delle lingue il testo tradotto è troppo lungo, è una parola singola e esce dalla griglia2 div.

Aggiornato anche il codice.

fonte

2015-12-30 Sudhansu Choudhary

Puoi aggiungere una semplice demo live per favore? Perché non c'è bisogno di impostare alcuna regola di interruzione di parole per l'esempio corrente sopra credo. – Stickers

@Pangloss si, per questa particolare griglia, capisco che non è necessario, ma il problema sorge quando ho una lunga parola in una delle griglie, dove il testo nell'estensione fuoriuscita dal div. Grazie per il tuo suggerimento Aggiungerà una demo e ti avviserà a breve. –

Utilizzare display:table-caption per ottenere ciò che si sta cercando.

LIVE DEMO

Il codice HTML:

<div id="grid2"> 
    <span id="theSpan">Product Support</span> 
</div>

Il CSS:

#theSpan{ 
    display:table-caption; 
}

Spero che questo aiuti.

fonte

2015-12-30 15:34:45 Nitesh

hey, ho dimenticato di menzionare una cosa, ho una larghezza fissa per il div con id, 'grid2'. In una delle lingue il testo tradotto è troppo lungo, è una parola singola e esce dalla griglia2 div. Aggiornerò anche la domanda Grazie per la tua risposta. –

Come da tua domanda, la mia risposta sopra ricorderà l'effetto 'break-word' che stai cercando. Anche se hai una larghezza fissa, i personaggi saranno rotti come desiderato. – Nitesh

Capisco, c'è un problema se il testo è una singola parola ed è troppo lungo, per una delle lingue che è. In tal caso il testo nella campata esce dal div a causa della larghezza fissa del div. –

ho avuto un buon successo in Chrome, Firefox e IE con utilizzando solo:

word-break: break-word; 
word-wrap: break-word;

Nel mio caso problema ero già in uso:

display: table-cell;

e ho finito per dover includere

max-width: 440px;

per ottenere il wrapping in tutti i browser. Nella maggior parte dei casi la larghezza massima non era necessaria.

fonte

2017-04-28 18:16:59

interruzione di parola: break-word; funziona solo per blink/webkit quindi non funziona in IE11 per me – Pumych

Come imitare l'interruzione di parole: break-word; per IE9, IE11 e Firefox

risposta

Problemi correlati