Hướng dẫn css div break - css div break

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

Nội dung chính ShowShow

• Làm cách nào để buộc một dòng phá vỡ trong CSS?
• Làm cách nào để buộc một dòng phá vỡ trong từ?
• Làm thế nào để bạn phá vỡ nội dung trong CSS?
• Làm thế nào để bạn phá vỡ một từ mà không có khoảng trống trong CSS?
• Làm thế nào để bạn phá vỡ một hàng dài trong CSS?
• Làm cách nào để chia một từ trong một div bằng CSS?

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

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

</div>

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

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

Pardeep Jain

80.4K36 Huy hiệu vàng159 Huy hiệu bạc213 Huy hiệu đồng36 gold badges159 silver badges213 bronze badges36 gold badges159 silver badges213 bronze badges

hỏi ngày 17 tháng 6 năm 2010 lúc 4:26Jun 17, 2010 at 4:26Jun 17, 2010 at 4:26

Nathan Osmannathan OsmanNathan OsmanNathan Osman

69K71 Huy hiệu vàng251 Huy hiệu bạc350 Huy hiệu Đồng71 gold badges251 silver badges350 bronze badges71 gold badges251 silver badges350 bronze badges

2

Sử dụng

word-break: break-all;

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

word-break: break-all;

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

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

Việc sử dụng hiện tại của

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

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

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 gold badges74 silver badges93 bronze badges59 gold badges74 silver badges93 bronze badges

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Jun 17, 2010 at 5:36Jun 17, 2010 at 5:36

5

Tôi không chắc chắn 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 thẻ

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

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

4 (Break Word) có nghĩa là: "Trình duyệt có thể chèn một đường ngắt ở đây, nếu nó muốn." Nó trình duyệt không nghĩ rằng một dòng phá vỡ cần thiết không có gì xảy ra.

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 gold badges74 silver badges93 bronze badges59 gold badges74 silver badges93 bronze badges

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Jun 17, 2010 at 5:36Jun 17, 2010 at 4:29

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

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

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

6

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

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Jun 17, 2010 at 4:29

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

Tôi không chắc chắn về khả năng tương thích của trình duyệtrahulfor tables, you also need to apply:

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

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 4:29

word-break: break-all;

Rahulrahulfor tables, you also need to apply:

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 gold badges74 silver badges93 bronze badges59 gold badges74 silver badges93 bronze badges

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Jun 17, 2010 at 5:36Nov 26, 2013 at 1:01

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

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

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

3

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

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Jun 17, 2010 at 4:29Mar 10, 2015 at 8:25

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

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

2

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 4:29

word-break: break-all;

Rahulrahulfor tables, you also need to apply:

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

182K49 Huy hiệu vàng230 Huy hiệu bạc261 Huy hiệu Đồng

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 gold badges74 silver badges93 bronze badges59 gold badges74 silver badges93 bronze badges

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Jun 17, 2010 at 5:36Dec 2, 2016 at 1:14

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

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

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

1

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

word-break: break-all;

word-break: break-all;

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 gold badges74 silver badges93 bronze badges59 gold badges74 silver badges93 bronze badges

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Jun 17, 2010 at 5:36Feb 26, 2019 at 8:52

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

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

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

word-break: break-all;

word-break: break-all;

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 4:29Jun 17, 2010 at 4:37Jun 17, 2010 at 4:37

RahulrahulBabikerBabiker

182K49 Huy hiệu vàng230 Huy hiệu bạc261 Huy hiệu Đồng27 gold badges74 silver badges124 bronze badges27 gold badges74 silver badges124 bronze badges

0

Tôi chỉ là một vấn đề tương tự, và đăng giải pháp cuối cùng của tôi ở đây. Nó cũng liên quan đến câu hỏi này.

Implement:

word-break: break-all;

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 gold badges74 silver badges93 bronze badges59 gold badges74 silver badges93 bronze badges

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Apr 24, 2018 at 14:09Apr 24, 2018 at 14:09

1

Tôi không chắc chắn 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 thẻ

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

0

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

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 4:29

Rahulrahul

182K49 Huy hiệu vàng230 Huy hiệu bạc261 Huy hiệu Đồng

Tylerh

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Apr 24, 2018 at 14:09

Shiva127Shiva127Shiva127Shiva127

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

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

word-break: break-all;

word-break: break-all;

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 4:29

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 gold badges74 silver badges93 bronze badges59 gold badges74 silver badges93 bronze badges

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Apr 24, 2018 at 14:09Feb 20, 2014 at 10:22

Tôi không chắc chắn về khả năng tương thích của trình duyệtyou want it to be. Invisible, but it gives a hyphen the moment it's needed, thus keeping both word connected and line filled to the utmost.

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

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

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

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 4:29Nov 4, 2019 at 22:35

Rahulrahul

word-break: break-all;

182K49 Huy hiệu vàng230 Huy hiệu bạc261 Huy hiệu ĐồngJan 16, 2020 at 11:24

Bạn có thể làm điều này một cách dễ dàng với một Div bằng cách cho nó phong cách Matoeil

word-break: break-all;

word-break: break-all;

Tuy nhiên, đối với các bảng, bạn cũng cần áp dụng: May 10 at 18:46

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

word-break: break-all;

Mã mẫu:1 gold badge25 silver badges24 bronze badgesFeb 16 at 6:32

Đã trả lời ngày 26 tháng 11 năm 2013 lúc 1:01Shams

Simon Eastsimon Đông2 bronze badges

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Feb 20, 2014 at 10:22

word-break: break-all;

Tôi không chắc chắn về khả năng tương thích của trình duyệtyou want it to be. Invisible, but it gives a hyphen the moment it's needed, thus keeping both word connected and line filled to the utmost.Sep 21, 2016 at 13:21

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

FYI: Đó là Hà Lan cho Cảnh sát Sân bay3 silver badges4 bronze badges

Đã trả lời ngày 4 tháng 11 năm 2019 lúc 22:35Nov 4, 2019 at 22:35

word-break: break-all;

Word-break: Bình thường có vẻ tốt hơn sử dụng hơn từ ngữ: đột phá vì từ đột phá phá vỡ các chữ cái đầu như enMay 7, 2015 at 9:26

2

Đã trả lời ngày 16 tháng 1 năm 2020 lúc 11:24Jan 16, 2020 at 11:24

MatoeilmatoeilMatoeilemploying the pseudo-class ::after or ::before . In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break. In myClass::after : Set the content property to "\a" (the new-line character).

6.5789 Huy hiệu vàng51 Huy hiệu bạc74 Huy hiệu đồng9 gold badges51 silver badges74 bronze badges

Đã trả lời ngày 10 tháng 5 lúc 18:46May 10 at 18:46.

Nhấp vào nơi bạn muốn phá vỡ một dòng ..

Nhấn Shift + Return. Từ chèn một đường tắt thủ công (). Mẹo: Để xem ngắt dòng thủ công, trên thanh công cụ tiêu chuẩn, nhấp vào ..

Làm thế nào để bạn phá vỡ nội dung trong CSS?

Một sự phá vỡ khó khăn ( -) sẽ luôn bị phá vỡ, ngay cả khi không cần thiết phải làm như vậy. Break Break (& Shy;) Chỉ phá vỡ nếu cần phá vỡ. Bạn cũng có thể sử dụng thuộc tính dấu gạch nối để sử dụng chuỗi bạn chọn thay vì ký tự dấu gạch nối ở cuối dòng (trước khi ngắt dòng gạch nối).A soft break ( ­ ) only breaks if breaking is needed. You can also use the hyphenate-character property to use the string of your choice instead of the hyphen character at the end of the line (before the hyphenation line break). A soft break ( ­ ) only breaks if breaking is needed. You can also use the hyphenate-character property to use the string of your choice instead of the hyphen character at the end of the line (before the hyphenation line break).

Làm thế nào để bạn phá vỡ một từ mà không có khoảng trống trong CSS?

Bạn có thể bọc một chuỗi dài, không có bất kỳ ký tự khoảng trắng nào bằng cách sử dụng thuộc tính CSS Word-Awrap hoặc Overflow-Prap, nếu bạn sử dụng CSS3.using the CSS word-wrap property, or overflow-wrap, if you use CSS3.using the CSS word-wrap property, or overflow-wrap, if you use CSS3.

Làm thế nào để bạn phá vỡ một hàng dài trong CSS?

Thuộc tính từ Word được sử dụng để phân chia/phá vỡ các từ dài và quấn chúng vào dòng tiếp theo.Thuộc tính CSS tràn Overflow có thể áp dụng cho các phần tử nội tuyến và chỉ định rằng trình duyệt có thể chia dòng bên trong phần tử đã chọn thành nhiều dòng ở một vị trí không thể phá vỡ khác.. The overflow–wrap CSS property is applicable to inline elements & specifies that the browser can break the line inside the selected element into multiple lines in an otherwise unbreakable place.. The overflow–wrap CSS property is applicable to inline elements & specifies that the browser can break the line inside the selected element into multiple lines in an otherwise unbreakable place.

Làm cách nào để chia một từ trong một div bằng CSS?

Sử dụng từ văn bản: từ đột phá;Nó thậm chí còn hoạt động trong IE6, đó là một bất ngờ thú vị.Word-wrap: từ đột phá đã được thay thế bằng bao bọc bao gồm: từ đột phá;mà hoạt động trong mọi trình duyệt hiện đại.; It even works in IE6, which is a pleasant surprise. word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser.; It even works in IE6, which is a pleasant surprise. word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser.