Giá trị mặc định. bình thường được kế thừa. vângCó thể hoạt hình. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. mục tiêu. Phong cách. wordBreak="break-all" Thử đi
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Thuộc tính word-break4. 05. 515. 03. 115. 0
Cú pháp CSS
phá vỡ từ. thông thường. phá vỡ tất cả. giữ tất cả. ngắt lời. ban đầu. thừa kế;
Giá trị tài sản
Giá trịMô tảDemonormalGiá trị mặc định. Sử dụng quy tắc ngắt dòng mặc địnhbreak-allĐể tránh tràn, từ có thể bị ngắt ở bất kỳ ký tự nào Bản trình diễn ❯keep-all Không nên sử dụng ngắt từ cho văn bản tiếng Trung/Nhật/Hàn [CJK]. Hành vi của văn bản không phải CJK giống như giá trị "bình thường"Bản trình diễn ❯ngắt từ Để tránh tràn, từ có thể bị ngắt tại các điểm tùy ý Bản trình diễn ❯initial Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế
Thuộc tính CSS line-break
đặt cách ngắt dòng văn bản tiếng Trung, tiếng Nhật hoặc tiếng Hàn [CJK] khi làm việc với dấu câu và ký hiệu
/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
/* Global values */
line-break: inherit;
line-break: initial;
line-break: revert;
line-break: revert-layer;
line-break: unset;
auto
Ngắt văn bản bằng quy tắc ngắt dòng mặc định
loose
Ngắt văn bản bằng quy tắc ngắt dòng hạn chế nhất. Thường được sử dụng cho các dòng ngắn, chẳng hạn như trong báo chí
normal
Ngắt văn bản bằng quy tắc ngắt dòng phổ biến nhất
strict
Ngắt văn bản bằng quy tắc ngắt dòng nghiêm ngặt nhất
anywhere
Có một cơ hội bọc mềm xung quanh mọi đơn vị ký tự typographic, bao gồm xung quanh bất kỳ ký tự dấu chấm câu hoặc khoảng trắng được giữ nguyên hoặc ở giữa các từ, bỏ qua bất kỳ lệnh cấm nào đối với ngắt dòng, ngay cả những lệnh cấm do các ký tự có ký tự GL, WJ hoặc ZWJ tạo ra . Các cơ hội gói khác nhau không được ưu tiên. Dấu gạch nối không được áp dụng
Giá trị ban đầuauto
Áp dụng cho tất cả các phần tửInherityyesGiá trị tính toán như đã chỉ địnhKiểu hoạt ảnhrời rạc
Trong CSS, nếu bạn có một chuỗi không thể ngắt, chẳng hạn như một từ rất dài, theo mặc định, nó sẽ làm tràn bất kỳ vùng chứa nào quá nhỏ đối với nó theo hướng nội tuyến. Chúng ta có thể thấy điều này xảy ra trong ví dụ dưới đây. từ dài đang kéo dài qua ranh giới của hộp nó được chứa trong
CSS sẽ hiển thị tràn theo cách này, vì nếu làm khác có thể gây mất dữ liệu. Trong CSS mất dữ liệu có nghĩa là một số nội dung của bạn biến mất. Vì vậy, giá trị ban đầu của overflow
là visible
và chúng ta có thể thấy văn bản tràn. Nói chung là có thể xem tràn ra ngoài dù có lộn xộn cũng tốt hơn. Nếu mọi thứ biến mất hoặc bị cắt xén như sẽ xảy ra nếu overflow
được đặt thành hidden
, bạn có thể không phát hiện ra điều đó khi xem trước trang web của mình. Tràn đầy lộn xộn ít nhất là dễ phát hiện và trong trường hợp xấu nhất, khách truy cập của bạn sẽ có thể xem và đọc nội dung ngay cả khi nội dung đó trông hơi lạ
Trong ví dụ tiếp theo này, bạn có thể thấy điều gì sẽ xảy ra nếu overflow
được đặt thành hidden
Để tìm kích thước tối thiểu của hộp sẽ chứa nội dung của nó mà không bị tràn, hãy đặt thuộc tính width
hoặc inline-size
của hộp thành min-content
Do đó, sử dụng min-content
là một khả năng cho các hộp tràn. Nếu có thể cho phép hộp phát triển thành kích thước tối thiểu cần thiết cho nội dung, nhưng không lớn hơn, sử dụng từ khóa này sẽ cung cấp cho bạn kích thước đó
Nếu hộp cần có kích thước cố định hoặc bạn muốn đảm bảo rằng các từ dài không thể tràn ra ngoài, thì thuộc tính visible
0 có thể trợ giúp. Thuộc tính này sẽ ngắt một từ khi nó quá dài để tự nó nằm trên một dòng
Ghi chú. Tài sản visible
0 hoạt động giống như tài sản không chuẩn visible
2. Thuộc tính visible
2 hiện được các trình duyệt coi là bí danh của thuộc tính tiêu chuẩn
Một tài sản thay thế để thử là visible
4. Thuộc tính này sẽ ngắt từ tại điểm nó tràn. Nó sẽ gây ra sự hòa vốn nếu việc đặt từ lên một dòng mới sẽ cho phép nó hiển thị mà không bị vỡ
Trong ví dụ tiếp theo này, bạn có thể so sánh sự khác biệt giữa hai thuộc tính trên cùng một chuỗi văn bản
Điều này có thể hữu ích nếu bạn muốn ngăn khoảng cách lớn xuất hiện nếu chỉ có đủ khoảng trống cho chuỗi. Hoặc, khi có một yếu tố khác mà bạn không muốn sự gián đoạn xảy ra ngay sau đó
Trong ví dụ dưới đây có một hộp kiểm và nhãn. Giả sử, bạn muốn nhãn bị hỏng nếu nó quá dài so với hộp. Tuy nhiên, bạn không muốn nó bị hỏng ngay sau hộp kiểm
Để thêm dấu gạch nối khi các từ bị hỏng, hãy sử dụng thuộc tính CSS visible
5. Sử dụng giá trị là visible
6, trình duyệt có thể tự động ngắt các từ tại các điểm gạch nối thích hợp, tuân theo bất kỳ quy tắc nào mà trình duyệt chọn. Để kiểm soát quy trình, hãy sử dụng giá trị visible
7, sau đó chèn ký tự ngắt cứng hoặc ngắt mềm vào chuỗi. Phá vỡ khó khăn [visible
8] sẽ luôn phá vỡ, ngay cả khi không cần thiết phải làm như vậy. Phá vỡ mềm [visible
9] chỉ phá vỡ nếu cần phá vỡ
Bạn cũng có thể sử dụng thuộc tính overflow
0 để sử dụng chuỗi bạn chọn thay vì ký tự gạch nối ở cuối dòng [trước dấu ngắt dòng gạch nối]
Thuộc tính này cũng nhận giá trị visible
6, giá trị này sẽ chọn đúng giá trị để đánh dấu ngắt dòng ở giữa từ theo quy ước đánh máy của ngôn ngữ nội dung hiện tại
Nếu bạn biết nơi bạn muốn ngắt một chuỗi dài, thì bạn cũng có thể chèn phần tử HTML overflow
2. Điều này có thể hữu ích trong các trường hợp như hiển thị một URL dài trên một trang. Sau đó, bạn có thể thêm thuộc tính để ngắt chuỗi ở những vị trí hợp lý giúp dễ đọc hơn