từ-cell từ-wrap không hoạt động với dấu gạch chéo

Question

Tôi đang cố gắng bọc văn bản trong bố cục cố định nhưng nó không hoạt động khi văn bản có dấu gạch chéo.

Điều này có thể được sửa mà không chèn khoảng trắng từ Javascript (CSS thuần túy) không?

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> 

Answer 1

Thêm table-layout:fixed; đến phần tử div "bảng" và chỉ định một chiều rộng để các tế bào để làm cho nó phá vỡ dòng:

JSFiddle

Answer 2

Chèn một thẻ <wbr> hoặc không gian có chiều rộng bằng không ​ sau mỗi o ccurrence của dấu gạch chéo hoặc ký tự khác cần được xử lý như cho phép ngắt dòng trực tiếp sau nó. Lựa chọn giữa các lựa chọn thay thế này là một chút complicated, nhưng vì mã của bạn đã không hoạt động trên các phiên bản cũ của IE, bạn cũng có thể bỏ qua chúng ở đây, và điều này sẽ làm cho sự lựa chọn đúng là ​. Tức là, bạn sẽ viết ví dụ

abfdbfdbfdb/​dfbfdbdfbfbf/​bdffbdbfdfbddfbdfbdfb 

Vấn đề ở cấp độ ký tự, không phải là vấn đề tạo kiểu.

Một chuỗi không chứa ký tự khoảng trắng thường không thể phân tách trong gói và phải như vậy, trừ khi bạn có thể làm cho trình duyệt có thể phá vỡ các điểm phá vỡ được chấp nhận hoặc gạch nối đúng cách và sử dụng phân chia từ. Một thiết lập như word-wrap: break-word có nghĩa là đối với trường hợp ngoại lệ, trường hợp khẩn cấp bị hỏng khi không có cách nào tốt để kiểm soát gói và có nhu cầu tránh tràn.