tag wbr non funziona in IE

L'interruzione parziale sembra non funzionare in IE. C'è qualche alternativa o come farlo funzionare?tag wbr non funziona in IE

http://fiddle.jshell.net/88q54/1/

body { 
font-size: 272px;  
} 


<div>W<wbr/>o<wbr/>r<wbr/>d</div>

Voglio la "parola" di essere fragile quando lo fa larghezza della finestra non in forma. Il lavoro è racchiuso in webkit e mozila, ma non in IE (10/11).

So che per parole rese fragili posso usare css word-break: break-all;

ma voglio essere in grado di mettere soft break in determinate posizioni della parola in modo che css word-break non funzioni correttamente per me.

fonte

2014-05-20 WHITECOLOR

cw wordwrap: break-word; InterNet Explorer interrompe la parola quando la parola supera la larghezza nella posizione in cui il carattere supera il limite. non può essere usato per rompere le parole. è usato all'interno di blocchetti nobr per rompere frasi ma non parole –

Come dicono sempre - " ~~Non~~ essere [timido] (https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Suggesting_line_break_opportunities) " – CBroe

Aggiungere il seguente nel foglio di stile:

wbr:after { content: "\00200B"; }

Questo inserisce U + 200B ZERO WIDTH SPACE, che è la controparte a livello di carattere del buon vecchio  che i browser hanno in gran parte viziato (un sad story).

In alternativa, è possibile sostituire i tag  con quel carattere, che è possibile scrivere in HTML come .

fonte

2014-05-20 12:01:10

Grazie, funziona bene. – WHITECOLOR

Aggiunto '& # x200b;' dove sono possibili interruzioni di parole. Nel mio caso dopo underscore ('_'). Funziona perfettamente in IE11 e Chrome 42 –

wbr: dopo non sembra funzionare per IE11, perché credo che sia considerato un tag vuoto. Secondo questo post: https://stackoverflow.com/a/24702765/2499165 la maggior parte dei browser non implementa: dopo per i tag vuoti. – jessewolfe

Jukka's answer è una buona soluzione. Tuttavia, nel caso qui sotto, è desiderabile consentire all'utente di copiare il testo, che è un indirizzo e-mail. In tale scenario, il carattere  non può introdursi nella stringa. Pertanto deve essere risolto in modo diverso, utilizzando più elementi in linea (ad esempio  o ) con display: inline-block;.

In questo caso, i tag  circondano i componenti dell'indirizzo di posta elettronica che terminano con un . o che iniziano con @.

.wbr-i-container i { 
    display: inline-block; 
    font-style: inherit; 
} 

<a class="wbr-i-container" 
><i>FirstName.</i 
><i>MiddleName.</i 
><i>LastName</i 
><i>@company.</i 
><i>com</i 
></a>

 viene utilizzato per brevità & leggibilità, mentre  sarebbe semanticamente corretto.

Funziona nelle versioni correnti di Chrome, Firefox, IE e Safari.

fonte

2015-04-24 09:36:03 bjornte

tag wbr non funziona in IE

risposta

Problemi correlati