Làm thế nào để buộc ngắt dòng trong một từ dài trong DIV?

Được rồi, điều này thực sự làm tôi bối rối. Tôi có một số nội dung bên trong một div như vậy:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Tuy nhiên, nội dung tràn qua DIV (như mong đợi) vì 'từ' quá dài.

Làm cách nào tôi có thể buộc trình duyệt 'ngắt' từ khi cần thiết để phù hợp với tất cả nội dung bên trong?

Sử dụng word-wrap:break-word;

Nó thậm chí hoạt động trong IE6, đó là một bất ngờ thú vị.

word-wrap: break-wordđã được thay thế bằng overflow-wrap: break-word;hoạt động trong mọi trình duyệt hiện đại. IE, là một trình duyệt đã chết, sẽ mãi mãi dựa vào sự không dùng nữa và không chuẩn word-wrap.

Việc sử dụng hiện tại word-wrapngày nay vẫn hoạt động vì nó là bí danh cho overflow-wrapmỗi đặc điểm kỹ thuật.

Tôi không chắc về khả năng tương thích của trình duyệt

word-break: break-all;

Ngoài ra, bạn có thể sử dụng <wbr>thẻ

<wbr>(ngắt từ) có nghĩa là: "Trình duyệt có thể chèn ngắt dòng ở đây, nếu muốn." Nó trình duyệt không nghĩ rằng ngắt dòng cần thiết không có gì xảy ra.

Điều này có thể được thêm vào câu trả lời được chấp nhận cho giải pháp 'trình duyệt chéo'.

Nguồn:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-USE-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Tôi chỉ giải quyết vấn đề tương tự và đăng giải pháp cuối cùng của mình TẠI ĐÂY . Nó cũng liên quan đến câu hỏi này.

Bạn có thể thực hiện điều này một cách dễ dàng với div bằng cách tạo kiểu cho nó word-wrap: break-word(và bạn cũng có thể cần phải đặt chiều rộng của nó).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Tuy nhiên, đối với các bảng , bạn cũng cần áp dụng : table-layout: fixed. Điều này có nghĩa là chiều rộng của cột không còn lỏng, nhưng được xác định dựa trên chiều rộng của các cột trong hàng đầu tiên (hoặc thông qua chiều rộng được chỉ định). Đọc thêm tại đây .

Mã mẫu:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​là thực thể HTML cho một ký tự unicode được gọi là không gian có độ rộng bằng không (ZWSP), là một ký tự vô hình chỉ định cơ hội ngắt dòng. Tương tự như vậy, mục đích của dấu gạch nối là chỉ định cơ hội ngắt dòng trong phạm vi từ.

Nhận thấy rằng việc sử dụng các công cụ sau đã hoạt động trên hầu hết các trình duyệt chính (Chrome, IE, Safari iOS / OSX) ngoại trừ Firefox (v50.0.2) khi sử dụng flexbox và dựa vào width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Lưu ý: bạn có thể cần thêm tiền tố của nhà cung cấp trình duyệt nếu bạn không sử dụng trình tự động sửa lỗi.

Một điều khác cần chú ý là văn bản sử dụng  cho khoảng cách có thể gây ra ngắt dòng giữa dòng.

CSS word-wrap:break-word; , đã được thử nghiệm trong FireFox 3.6.3

Tôi đã giải quyết vấn đề của tôi với mã dưới đây.

display: table-caption;

Hủy bỏ white-space: nowrap, nếu có bất kỳ.

Triển khai thực hiện:

white-space: inherit;
word-break: break-word;

Khoảng trắng được bảo tồn bởi trình duyệt. Văn bản sẽ bao bọc khi cần thiết và ngắt dòng

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

BẢN GIỚI THIỆU

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Từ MDN :

Các overflow-wrap quy định cụ thể thuộc tính CSS hay không duyệt nên chèn ngắt dòng trong lời nói để ngăn chặn văn bản từ tràn hộp nội dung của nó.

Ngược lại word-break, overflow-wrapsẽ chỉ tạo ra một ngắt nếu toàn bộ một từ không thể được đặt trên dòng riêng của nó mà không tràn ra.

Vì vậy, bạn có thể sử dụng:

overflow-wrap: break-word;

Tôi có thể sử dụng ?

Trước tiên, bạn nên xác định chiều rộng của yếu tố của bạn. Ví dụ:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

để khi văn bản đạt đến chiều rộng phần tử, nó sẽ được chia thành các dòng.

Như đã đề cập trong câu trả lời của @ davidcondrey, không chỉ có ZWSP, mà còn cả SHY ­ ­có thể được sử dụng bằng những từ được xây dựng rất dài (nghĩ tiếng Đức hoặc tiếng Hà Lan) phải bị phá vỡ tại chỗ bạn muốn. Vô hình, nhưng nó cho một dấu gạch nối thời điểm cần thiết, do đó giữ cho cả từ được kết nối và dòng được điền đến mức tối đa.

Bằng cách đó, từ luchthavenpolitieagent có thể được ghi nhận vì lucht­haven­politie­agentnó cho các phần dài hơn các âm tiết của từ này.
Mặc dù tôi chưa bao giờ đọc bất cứ điều gì chính thức về nó, những dấu gạch nối mềm này có thể được ưu tiên cao hơn trong trình duyệt so với các dấu gạch nối chính thức trong các từ đơn của cấu trúc ( nếu chúng có một số phần mở rộng cho nó).
Trong thực tế, không có trình duyệt nào có khả năng tự phá vỡ một từ dài, được xây dựng như vậy; trên các màn hình nhỏ hơn dẫn đến một dòng mới cho nó hoặc trong một số trường hợp thậm chí là một dòng một từ (như khi hai trong số các từ được xây dựng theo dõi).

FYI: đó là tiếng Hà Lan cho cảnh sát sân bay

word-break: bình thường có vẻ tốt hơn để sử dụng hơn word-break: break-word vì break-word break ban đầu như EN

word-break: normal

Làm cái này:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

hãy thử nó theo phong cách của chúng tôi

white-space: normal;