Trình bao bọc từ tương thích và khoảng trắng: trước?

Question

Tôi cần văn bản trong một div cần được bảo quản và bọc. Cho đến nay tôi đang có một thời gian khó khăn để đưa ra một giải pháp. Giải pháp tốt nhất mà tôi có thể tìm thấy không hoạt động với tất cả các trình duyệt.

Các công trình sau đây trong Chrome và IE6 +, nhưng trong Firefox văn bản không được gói.

white-space: pre; 
word-wrap: break-word; 

Tôi đã tìm thấy rằng vì bất kỳ lý do nào văn bản không được bao bọc trong Firefox với khoảng trắng: trước. Và -moz-pre-wrap không hoạt động trong Firefox 3.5 (tại sao ??), chỉ được bọc trước. NHƯNG khi tôi thêm trước khi bọc vào danh sách, IE 6 và 7 không hoạt động. Rất bực bội.

Mã:

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre; 
    word-wrap: break-word; 
} 

Answer 1

Các thuộc tính CSS3 không phải lúc nào làm việc như chúng tôi muốn họ làm việc :). Tuy nhiên, tôi không thấy điểm nào trong việc trộn white-space:pre và word-wrap:break-word.

Trước đây sẽ không bao gồm văn bản trừ khi gặp phải thẻ <br />. Điều thứ hai sẽ làm ngược lại: phá vỡ các từ bất cứ khi nào nó cần thiết, ngay cả ở giữa một từ. Họ dường như là mâu thuẫn, và câu trả lời rõ ràng nhất cho lý do tại sao các trình duyệt khác nhau phản ứng khác nhau với các đặc tính này là

• họ hỗ trợ một trong hai thuộc tính
• vì chúng là mâu thuẫn, các ưu tiên là undefined hoặc khác nhau trong mỗi trình duyệt

(Tôi không thể chắc chắn, tôi không thực sự là chuyên gia ở đây).

Tôi khuyên bạn nên xem xét kỹ hơn this và this và sau đó quyết định những gì nên được sử dụng trong trường hợp cụ thể của bạn.

[EDIT]

Bạn có thể muốn thử loại này (nên làm việc trong tất cả các trình duyệt):

white-space: -moz-pre-wrap; /* Firefox */ 
white-space: -pre-wrap; /* ancient Opera */ 
white-space: -o-pre-wrap; /* newer Opera */ 
white-space: pre-wrap; /* Chrome; W3C standard */ 
word-wrap: break-word; /* IE */ 

tôi đã không kiểm tra này, nhưng tôi tin rằng nó sẽ làm các trick cho bạn.

Answer 2

Tôi biết đây là một vấn đề rất cũ, nhưng kể từ khi tôi vừa chạy vào nó tôi cảm thấy sự thôi thúc để trả lời.

Giải pháp của tôi sẽ là:

Sử dụng white-space: pre-wrap;, vì nó là gần giống như white-space: pre; chỉ cần thêm dấu ngắt hàng. (Tham khảo: http://www.quirksmode.org/css/whitespace.html)

Sau đó, tôi đặc biệt sẽ nhắm mục tiêu cũ tức là với một trong hai ý kiến ​​có điều kiện (tài liệu tham khảo: http://www.quirksmode.org/css/condcom.html) hoặc với hacks css trình duyệt cụ thể (http://paulirish.com/2009/browser-specific-css-hacks/).

Một ví dụ cho phương pháp thứ hai:

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

/* IE6 and below */ 
* html .introsub { white-space: pre } 

/* IE7 */ 
*:first-child+html .introsub { white-space: pre } 

Đây sẽ là đủ để buộc nó để quấn.