Hướng dẫn how to force line break css - làm thế nào để buộc ngắt dòng css

Question

Đượ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 Show

Làm thế nào để bạn buộc một dòng phá vỡ?
Làm thế nào để bạn buộc một dòng phá vỡ trong HTML?
Làm thế nào để tôi buộc phải phá vỡ từ CSS?
Làm thế nào để bạn phá vỡ một hàng dài trong 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.3k36 Huy hiệu vàng159 Huy hiệu bạc213 Huy hiệu đồng36 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:26

Nathan Osmannathan OsmanNathan Osman

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

2

Sử dụng

word-break: break-all;

8

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

word-break: break-all;

9 đã được thay thế bằng

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

0 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

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

1 không tiêu chuẩn.

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%;
}

1 ngày nay vẫn hoạt động vì đây là bí danh cho

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

3 theo thông số kỹ thuật.

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 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: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%;
}

4

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 badges

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 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%;
}

449 gold badges230 silver badges261 bronze badges

6

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.

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 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%;
}

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%;
}

7. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). Read more here.

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

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 */
}

Tylerh

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

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 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%;
}

417 gold badges135 silver badges131 bronze badges

3

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.

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

Rahulrahuldavidcondrey

182K49 Huy hiệu vàng230 Huy hiệu bạc261 Huy hiệu Đồng15 gold badges111 silver badges134 bronze badges

2

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.

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

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

word-break: break-all;

9 (và bạn cũng có thể cần phải đặt chiều rộng của nó).

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

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

7. Điều này có nghĩa là chiều rộng của các cột không còn chất lỏng, nhưng được xác định dựa trên chiều rộng của các cột chỉ trong hàng đầu tiên (hoặc thông qua chiều rộng được chỉ định). Đọc thêm tại đây.

Tylerh

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

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 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%;
}

45 gold badges35 silver badges39 bronze badges

1

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.

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

Rahulrahul

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>

Tylerh

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

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 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ô 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%;
}

41 gold badge30 silver badges32 bronze badges

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.

word-break: break-all;

8, tested in FireFox 3.6.3

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

RahulrahulBabiker

182K49 Huy hiệu vàng230 Huy hiệu bạc261 Huy hiệu Đồng27 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:

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

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 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:09

1

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

display: table-caption;

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%;
}

4Jan 4, 2017 at 19:20

0

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.

Đã 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

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.

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

word-break: break-all;

9 (và bạn cũng có thể cần phải đặt chiều rộng của nó).

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

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

7. Điều này có nghĩa là chiều rộng của các cột không còn chất lỏng, nhưng được xác định dựa trên chiều rộng của các cột chỉ trong hàng đầu tiên (hoặc thông qua chiều rộng được chỉ định). Đọc thêm tại đây.Nov 7, 2017 at 6:53

Shiva127Shiva127Shiva127

Mã mẫu:1 gold badge25 silver badges24 bronze badges

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

word-break: break-all;

1

word-break: break-all;

2

Simon Eastsimon Đông

Tylerh

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

Đã trả lời ngày 17 tháng 6 năm 2010 lúc 5:36Feb 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%;
}

4
Though I never read anything official about it, these soft hyphens manage to get higher priority in browsers than the official hyphens in the single words of the construct (if they have some extension for it at all).
In practice, no browser is capable of breaking such a long, constructed word by itself; on smaller screens resulting in a new line for it, or in some cases even a one-word-line (like when two of those constructed words follow up).

FYI: Đó là Hà Lan cho Cảnh sát Sân bay

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

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ư en

word-break: break-all;

3

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

MatoeilmatoeilMatoeil

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

word-break: break-all;

4

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

Bạn có thể sử dụng một hệ thống lưới cho việc này.use a grid system for this.

word-break: break-all;

5

Đã trả lời ngày 16 tháng 2 lúc 6:32Feb 16 at 6:32

ShamsshamsShams

492 huy hiệu đồng2 bronze badges

Làm cái này:

word-break: break-all;

6

Đã trả lời ngày 21 tháng 9 năm 2016 lúc 13:21Sep 21, 2016 at 13:21

Amit Bendeamit Bendeamit bende

2563 Huy hiệu bạc4 Huy hiệu đồng3 silver badges4 bronze badges

Chỉ cần thử điều này trong phong cách của chúng tôi

word-break: break-all;

7

Đã trả lời ngày 7 tháng 5 năm 2015 lúc 9:26May 7, 2015 at 9:26

2

Làm thế nào để bạn buộc một dòng phá vỡ?

Nhấn ALT+ENTER để chèn ngắt dòng.ALT+ENTER to insert the line break.

Làm thế nào để bạn buộc một dòng phá vỡ trong HTML?

Để thực hiện ngắt dòng trong HTML, sử dụng thẻ.Chỉ cần đặt thẻ bất cứ nơi nào bạn muốn buộc phải phá vỡ dòng.Vì ngắt dòng HTML là một yếu tố trống, không có thẻ đóng.use the
tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag.

Làm thế nào để tôi buộc phải phá vỡ từ CSS?

Thuộc tính phá vỡ từ trong CSS có thể được sử dụng để thay đổi khi phá vỡ dòng phải xảy ra.Thông thường, dòng vỡ trong văn bản chỉ có thể xảy ra trong một số không gian nhất định, như khi có một không gian hoặc dấu gạch nối.Nếu chúng ta sau đó đặt chiều rộng của văn bản thành một em, từ sẽ bị phá vỡ bởi mỗi chữ cái: html.. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen. If we then set the width of the text to one em , the word will break by each letter: HTML.

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.

programming css overflow-wrap Word-wrap CSS overflow-wrap css