Thẻ wbr không hoạt động trong IE

Question

Chấm mềm dường như không hoạt động trong IE. Có cách nào thay thế hoặc cách làm cho nó hoạt động không?

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

body { 
font-size: 272px;  
} 


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

Tôi muốn các "chữ" là vỡ khi nó chiều rộng cửa sổ không phù hợp. Công việc được gói trong webkit và mozila, nhưng không có trong IE (10/11).

Tôi biết rằng đối với các từ được thực hiện, tôi có thể sử dụng css word-break: break-all;

nhưng tôi muốn có thể đặt dấu ngắt mềm ở vị trí nhất định của từ để từ-css không hoạt động chính xác cho tôi.

Answer 1

Thêm dòng sau vào tấm phong cách của bạn:

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

này chèn U + 200B ZERO WIDTH SPACE, đó là người đồng tính cấp của tốt cũ <wbr> mà các trình duyệt có phần lớn hư hỏng (một sad story).

Hoặc, bạn có thể thay thế <wbr> thẻ theo ký tự đó, bạn có thể viết bằng HTML là ​.

Answer 2

Jukka's answer là một sản phẩm tốt. Tuy nhiên, trong trường hợp dưới đây, nó là mong muốn cho phép người dùng sao chép văn bản, đó là một địa chỉ e-mail. Trong trường hợp đó, ký tự ​ không thể lẻn vào chuỗi. Do đó, nó phải được giải quyết khác nhau, sử dụng nhiều yếu tố nội tuyến (ví dụ: <span> hoặc <i>) với display: inline-block;.

Trong trường hợp này, <i> thẻ bao quanh thành phần địa chỉ email kết thúc bằng . hoặc bắt đầu bằng @.

.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> được sử dụng cho ngắn gọn & dễ đọc, trong khi <span> sẽ là ngữ nghĩa chính xác.

Làm việc trong các phiên bản hiện tại của Chrome, Firefox, IE và Safari.