từ bọc trong css/js

Question

Tôi đang tìm cách trình duyệt chéo bao gồm các phần văn bản dài không có dấu cách (ví dụ: URL dài) bên trong các div có độ rộng được xác định trước.

Dưới đây là một số giải pháp tôi đã tìm thấy khắp nơi trên web và tại sao họ không làm việc cho tôi:

• overflow: hidden/tự động/di chuyển - Tôi cần toàn bộ văn bản được hiển thị mà không cần cuộn. Các div có thể phát triển theo chiều dọc, nhưng không theo chiều ngang.
• Tiêm & nhút nhát; vào chuỗi qua js/server-side - & nhút nhát; được hỗ trợ bởi FF3 ngay bây giờ, nhưng sao chép và dán URL bằng một nhòe &; ở giữa sẽ không hoạt động trong Safari. Ngoài ra, theo hiểu biết của tôi, không có phương pháp đo chiều rộng văn bản rõ ràng nào để tìm ra khoảng bù chuỗi tốt nhất để thêm các ký tự này vào (có một cách hacky, xem mục tiếp theo). Một vấn đề khác là việc phóng to trong Firefox và Opera có thể dễ dàng phá vỡ điều này.
• bán phá giá văn bản thành phần tử ẩn và đo offsetWidth - liên quan đến mục ở trên, yêu cầu thêm ký tự thừa vào chuỗi. Ngoài ra, việc đo lường số lần ngắt được yêu cầu trong một đoạn văn bản dài có thể dễ dàng yêu cầu hàng ngàn lần chèn DOM đắt tiền (một cho mỗi chiều dài chuỗi con), có thể đóng băng hiệu quả trang web.
• sử dụng phông chữ đơn cách - một lần nữa, việc thu phóng có thể làm hỏng các tính toán chiều rộng và văn bản không thể được tạo kiểu tự do.

Những điều trông đầy hứa hẹn nhưng không khá có:

• word-wrap: word break- - nó bây giờ part of CSS3 working draft, nhưng nó không được hỗ trợ bởi một trong hai trình duyệt Firefox, Opera hoặc Safari được nêu ra. Đây sẽ là giải pháp lý tưởng nếu nó làm việc trên tất cả các trình duyệt hiện nay :(
• tiêm <WBR> thẻ vào chuỗi qua js/server-side - sao chép và dán URL tác phẩm trong tất cả các trình duyệt, nhưng tôi vẫn không Ngoài ra, thẻ này sẽ vô hiệu hóa HTML. Ngoài ra, thẻ này sẽ làm mất hiệu lực HTML. bộ nhớ và làm chậm truy vấn bộ chọn, trong số những thứ khác)

Có ai có thêm ý tưởng về cách giải quyết vấn đề này không?

Answer 1

Có một vấn đề liên quan lỏng lẻo ở đây textarea with 100% width ignores parent element's width in IE7

Không biết nếu bất kỳ giải pháp thuyết phục đã từng được tìm thấy, nhưng nó có vẻ như gần nhất được word-break: break-tất cả, mà có thể thực hiện công việc trong Internet Exploder.

Tôi cũng tìm thấy trang này http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html được chôn trong dấu trang của tôi, cho biết một công việc xung quanh hầu hết các trình duyệt khác, điều này có thể hữu ích.

CSS3 sẽ tuyệt vời nếu nó ở đây ...

Hy vọng rằng sẽ hữu ích, sẽ được quan tâm để xem những gì bạn nghĩ ra. Xin lỗi tôi không thể cung cấp bất cứ điều gì được kiểm tra hoặc cụ thể hơn.

Answer 2

Tôi thường xử lý việc này bằng cách kết hợp word-wrap và ý tưởng <wbr>. lưu ý có một vài số variants. như bạn có thể thấy, ​ có lẽ là cách tốt nhất để bạn có thể tương thích.

word-wrap hỗ trợ trình duyệt không phải là khủng khiếp , tất cả mọi thứ được xem xét, Safari, Internet Explorer và Firefox 3.1 (Alpha Build) tất cả các hỗ trợ nó (src), vì vậy chúng tôi có thể không tất cả những gì xa.

Liên quan đến sự vỡ phía máy chủ, tôi đã sử dụng phương pháp này khá thành công (php):

function _wordwrap($text) { 
    $split = explode(" ", $text); 
    foreach($split as $key=>$value) { 
     if (strlen($value) > 10) { 
      $split[$key] = chunk_split($value, 5, "​"); 
     } 
    } 
    return implode(" ", $split); 
} 

Về cơ bản, các từ hơn 10 ký tự, tôi chia chúng lúc 5 ký tự mỗi. Điều này dường như làm việc cho tất cả các trường hợp sử dụng tôi đã được giao.

Answer 3

Sử dụng cụm từ thông dụng trong PHP sẽ nhanh hơn để chia nhỏ các từ dài. Tôi đã tạo một hàm xử lý htmlspecialchars và chia nhỏ các từ với & nhút nhát; Đây là chức năng cho bất cứ ai quan tâm. Chỉ cần vượt qua chuỗi và độ dài từ tối đa (để bằng 0 nếu bạn không muốn chia nhỏ các từ với & nhút nhát;) và nó sẽ trả về một chuỗi có ký tự đặc biệt html được chuyển đổi và các từ được chia nhỏ với & nhút nhát;

function htmlspecialchars2($string = "", $maxWordLength = 0) 
{ 
    if($maxWordLength > 0) 
    { 
     $pattern = '/(\S{'.$maxWordLength.',}?)/'; 
     $replacement = '$1­'; 
     $string = preg_replace($pattern, $replacement, $string); 
    } 

    //now encode special chars but dont encode ­ 
    $string = preg_replace(array('/\&(?!shy\;)/','/\"/',"/\'/",'/\</','/\>/'), array('&amp;','&quot;','&#039;','&lt;','&gt;'), $string); 

    return $string; 
} 

Answer 4

Bạn có thể sử dụng bố cục bảng + thuộc tính CSS bao bọc từ hiện hoạt động trong IE7-8 và FF3.5. Nó sẽ không giải quyết vấn đề nhưng ít nhất thiết kế của bạn sẽ không bị hỏng.

Answer 5

Css yo!

.wordwrap { 
    white-space: pre-wrap; /* css-3 */ 
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
    white-space: -pre-wrap; /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
} 

Ngoài ra tôi chỉ tìm thấy bài viết này http://www.impressivewebs.com/word-wrap-css3/

Vì vậy, bạn nên sử dụng

.wordwrap { 
    word-wrap: break-word; 
} 

.no_wordwrap { 
    word-wrap: normal; 
} 

Answer 6

sử dụng white-space: bình thường trong css nếu cần để bọc văn bản tự động theo chiều cao và chiều rộng của thành phần để hiển thị hy vọng điều này có thể giúp đầy đủ cho u.

Answer 7

Rất giống với câu trả lời của Owen, điều này đạt được điều tương tự server-side trong một dòng:

return preg_replace_callback('/\w{10,}/', create_function('$matches', 'return chunk_split($matches[0], 5, "​");'), $value); 

Answer 8

này có thể khắc phục vấn đề của bạn

function htmlspecialchars2($string = "", $maxWordLength = 0){ 
return wordwrap($string , $maxWordLength,"\n", true); 
}