CSS chia văn bản thành hai dòng

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 overflowvisible 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 visible0 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 visible0 hoạt động giống như tài sản không chuẩn visible2. Thuộc tính visible2 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à visible4. 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 visible5. Sử dụng giá trị là visible6, 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ị visible7, sau đó chèn ký tự ngắt cứng hoặc ngắt mềm vào chuỗi. Phá vỡ khó khăn (visible8) 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 (visible9) chỉ phá vỡ nếu cần phá vỡ

Bạn cũng có thể sử dụng thuộc tính overflow0 để 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ị visible6, 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 overflow2. Đ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