Ngắt chữ - Thủ thuật CSS

Anonim

Các word-breakbất động sản trong CSS có thể được sử dụng để thay đổi khi ngắt dòng phải xảy ra. Thông thường, ngắt dòng trong văn bản chỉ có thể xảy ra trong một số khoảng trắng nhất định, như khi có khoảng trắng hoặc dấu gạch ngang.

Trong ví dụ dưới đây, chúng ta có thể tạo các word-breakchữ cái giữa các chữ cái thay thế:

p ( 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 em, thì từ sẽ ngắt theo từng chữ cái:

Xem văn bản Đặt bút theo chiều dọc với ngắt chữ bằng CSS-Tricks (@ css-trick) 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 để 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 URL dài sao chép và dán. Nếu URL đó không có dấu gạch nối, nó có thể vượt ra ngoài hộp chính và trông xấu hoặc tệ hơn là gây ra các vấn đề về bố cục.

Xem các liên kết Sửa bút bị ngắt chữ bằng CSS-Tricks (@ css-trick) trên CodePen.

Giá trị

  • normal: sử dụng các quy tắc mặc định để ngắt từ.
  • break-all: bất kỳ từ / chữ cái nào có thể ngắt dòng tiếp theo.
  • keep-all: cho các từ văn bản tiếng Trung, tiếng Nhật và tiếng Hàn không bị vỡ. Nếu không thì điều này giống như normal.

Thuộc tính này cũng thường được sử dụng cùng với thuộc tính gạch nối để khi ngắt xảy ra dấu gạch nối sẽ được chèn vào, theo tiêu chuẩn trong sách.

Cách 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 hợp lý, nó có thể trông kỳ lạ trên tiêu đề và văn bản được định dạng trước (

).

Có liên quan


    

  • bọc tràn
    • 

  • dấu gạch ngang
    • 

  • khoảng trắng
    • 

  • Xử lý các từ và URL dài
    • 



Hỗ trợ trình duyệt


Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.


Máy tính để bàn


 

 

 Trình duyệt Chrome Firefox I E Cạnh Safari 


 

 

 

 23 49 11 18 6.1 


 

 



Di động / Máy tính bảng


 

 

 Chrome dành cho Android Android Firefox Android iOS Safari 


 

 

 

 88 85 4.4 7,0-7,1 


 

 



Safari và iOS hỗ trợ break-allgiá trị nhưng khôngkeep-all