Hướng dẫn how do i force a break in css word? - làm thế nào để tôi buộc ngắt trong từ 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 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?



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

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 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.

Hướng dẫn how do i force a break in css word? - làm thế nào để tôi buộc ngắt trong từ css?

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


list

1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline

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 cách nào để buộc một dòng phá vỡ trong CSS?

Một sự phá vỡ dòng có thể được thêm vào trong HTML, chỉ sử dụng CSS, bằng cách sử dụng pseudo-class :: sau hoặc :: trước. Trong bảng kiểu, chúng tôi sử dụng các lớp giả này, với lớp HTML hoặc ID, trước hoặc sau nơi chúng tôi muốn chèn một dòng phá vỡ. Trong MyClass :: Sau: Đặt thuộc tính Nội dung thành "\ A" (ký tự dòng mới).employing 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).

Làm cách nào để buộc một dòng phá vỡ trong từ?

Chèn một đường dây thủ công..

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).

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.

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.

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.

programming css Word-wrap CSS Word-wrap: break-word overflow-wrap Div break line Word-wrap trong CSS

Hướng dẫn how do i force a break in css word? - làm thế nào để tôi buộc ngắt trong từ css?

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?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội