tag wbr nie działa w IE

Question

Soft break wydaje się nie działać w IE. Czy jest jakaś alternatywa czy jak to działa?

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

body { 
font-size: 272px;  
} 


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

chcę „słowo” być krucha, gdy nie pasuje do okna szerokość. Praca jest opakowana w webkit i mozila, ale nie w IE (10/11).

Wiem, że dla słów, które są łamliwe, mogę używać css word-break: break-all;

ale chcę być w stanie umieścić miękką przerwę w pewnej pozycji tego słowa, więc css word-break nie działa poprawnie dla mnie.

Answer 1

Dodaj następujące do swojego arkusza stylów:

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

to wstawienie U + 200B ZERO szerokości spacji, która jest odpowiednikiem charakter poziomu dobrego starego <wbr> że przeglądarki mają w dużej mierze zepsuty (a sad story).

Można również zastąpić tagi <wbr> przez tę postać, którą można napisać w HTML jako ​.

Answer 2

Jukka za answer jest dobry. Jednak w poniższym przypadku jest pożądane, aby zezwolić użytkownikowi na kopiowanie tekstu, którym jest adres e-mail. W tym scenariuszu postać ​ nie może wkraść się do napisu. Dlatego musi zostać rozwiązany inaczej, używając wielu elementów śródliniowych (np. <span> lub <i>) z display: inline-block;.

W tym przypadku znaczniki <i> otaczają komponenty adresów e-mail zakończone znakiem . lub rozpoczynając od @.

.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> 

<i> służy do zwięzłość & czytelności podczas <span> byłoby semantycznie poprawne.

Działa w bieżących wersjach Chrome, Firefox, IE i Safari.