DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!
Thuộc tính
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
2 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.Trong ví dụ dưới đây, chúng ta có thể tạo
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
2 giữa các chữ cái thay thế: thay vào đó:.element {
word-break: break-all;
}
Nếu sau đó chúng ta đặt chiều rộng của văn bản thành một
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
4, từ sẽ bị hỏng theo từng chữ cái:Xem văn bản Cài đặt bút theo chiều dọc với Word-break bởi CSS-Tricks [@CSS-Tricks] trên CodePen.
Giá trị này thường được sử dụng ở những nơi có nội dung do người dùng tạo ra để các chuỗi dài không có nguy cơ phá vỡ bố cục. Một ví dụ rất phổ biến là một bản sao dài và URL dán. Nếu URL đó không có dấu gạch nối, nó có thể vượt ra ngoài hộp cha mẹ và trông xấu hoặc tệ hơn, gây ra các vấn đề về bố cục.
Xem các liên kết sửa bút với Word-break bằng CSS-Tricks [@CSS-Tricks] trên CodePen.
Giá trị
5: Sử dụng các quy tắc mặc định để phá vỡ từ.-ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;
6: Bất kỳ từ/chữ cái nào cũng có thể đột nhập vào dòng tiếp theo.-ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;
7: Đối với các từ văn bản Trung Quốc, Nhật Bản và tiếng Hàn không bị phá vỡ. Nếu không, điều này giống như-ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;
5.-ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;
Tài sản này cũng thường được sử dụng cùng với thuộc tính Hyphens để khi nghỉ xảy ra, một sự cường điệu được chèn, theo tiêu chuẩn trong sách.
Việc sử dụng đầy đủ, với các tiền tố nhà cung cấp cần thiết, là:
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
Sử dụng các thuộc tính này trên bộ chọn phổ quát có thể hữu ích nếu bạn có một trang web có nhiều nội dung do người dùng tạo. Mặc dù cảnh báo công bằng, nó có thể trông kỳ lạ trên các tiêu đề và văn bản được định dạng sẵn [
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
9
].
- overflow-wrap
- Bạch cầu
- white-space
- Xử lý các từ và url dài
Hỗ trợ trình duyệt
Máy tính để bàn
23 | 49 | 11 | 18 | 6.1 |
Di động / máy tính bảng
107 | 106 | 4.4 | 7.0-7.1 |
Safari và iOS hỗ trợ giá trị
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
6 nhưng không phải -ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
7 Tôi có một tình huống có thể có những từ dài như 'Hellowordsometext' hoặc số nguyên như '1234567891122' mà không có bất kỳ không gian nào ở giữa. Vui lòng kiểm tra JS này. //jsfiddle.net/rzq5e/6/
Làm thế nào có thể chia nó vào dòng tiếp theo sau khi nó đạt đến chiều rộng div. Điều xảy ra bây giờ là, nó kéo dài ra cùng với div
Solutionforentprise
Benmorel
32.9K48 Huy hiệu vàng173 Huy hiệu bạc 306 Huy hiệu đồng48 gold badges173 silver badges306 bronze badges
Hỏi ngày 5 tháng 9 năm 2013 lúc 4:56Sep 5, 2013 at 4:56
Những gì bạn cần là
].
2, thuộc tính này sẽ buộc chuỗi không cách đều nhau phá vỡ bên trong
].
3Thử nghiệm
div {
width: 20px;
word-wrap: break-word;
}
Đã trả lời ngày 5 tháng 9 năm 2013 lúc 4:57Sep 5, 2013 at 4:57
Ông Alienmr. Người ngoài hành tinhMr. Alien
150K33 Huy hiệu vàng289 Huy hiệu bạc273 Huy hiệu Đồng33 gold badges289 silver badges273 bronze badges
1
Các câu trả lời khác có một số vấn đề với các trình duyệt cũ, như trước Chrome 32.
Tốt hơn là sử dụng mã này:
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
Bạn cũng có thể thêm một dấu gạch nối trong đó từ bị hỏng [nếu được hỗ trợ]:
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
Nguồn
.c1 {
width: 200px;
border: 1px solid;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported [No Blink] */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
For more information, please visit: //csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.
Đã trả lời ngày 1 tháng 1 năm 2019 lúc 8:21Jan 1, 2019 at 8:21
MoradnejadmoradnejadMoradnejad
3.2172 Huy hiệu vàng26 Huy hiệu bạc51 Huy hiệu Đồng2 gold badges26 silver badges51 bronze badges
đưa ID hoặc lớp học cho div của bạn
sau đó
#divid
{
width: 30px;
word-wrap: break-word;
}
Word-wrap được hỗ trợ trong IE 5.5+, Firefox 3.5+ và các trình duyệt WebKit như Chrome và Safari, Opera 10.5+.
Đã trả lời ngày 5 tháng 9 năm 2013 lúc 5:02Sep 5, 2013 at 5:02
4
Như thế này
THỬ NGHIỆM
CSS
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
0Đã trả lời ngày 5 tháng 9 năm 2013 lúc 5:12Sep 5, 2013 at 5:12
Falguni Panchalfalguni PanchalFalguni Panchal
8.8173 Huy hiệu vàng26 Huy hiệu bạc33 Huy hiệu Đồng3 gold badges26 silver badges33 bronze badges
Khắc phục kích thước của div và áp dụng 'Overflow: Hidden' vì vậy nó sẽ không ảnh hưởng đến kích thước lưới một NA.
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
1Bạn có cần xem toàn bộ văn bản?
Đã trả lời ngày 5 tháng 9 năm 2013 lúc 5:02Sep 5, 2013 at 5:02
0