Css thêm dấu gạch nối khi ngắt từ

Ví dụ, trong ngôn ngữ tiếng Anh, khi từ "required" được gạch nối, nó sẽ trở thành "re-quired". Không "bắt buộc" hoặc "bắt buộc". Đây là theo từ điển của ngôn ngữ tiếng Anh

Rõ ràng khi trình duyệt ngắt từ theo quy tắc của ngôn ngữ, nó cần biết ngôn ngữ của văn bản hiện tại. Có thể chỉ định ngôn ngữ bằng thuộc tính lang . Điều này có thể được đặt trên các phần tử riêng lẻ hoặc trên phần tử gốc .

Thử nghiệm

Đây là một vùng chứa demo bao gồm một từ dài chống chủ nghĩa thành lập. Một từ dài khác là pneumonoultramicroscopicsilicovolcanoconiosis. Trình duyệt sẽ thêm dấu gạch nối vào bất cứ nơi nào cần thiết để tiết kiệm không gian

Thuộc tính hyphens xác định xem có cho phép gạch nối để tạo thêm cơ hội xuống dòng mềm trong một dòng văn bản hay không

Đưa ra bản chạy thử ❯

Giá trị mặc định. hướng dẫn sử dụng được kế thừa. vângCó thể hoạt hình. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. sự vật. Phong cách. dấu gạch nối = "không"

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

Dấu gạch nối thuộc tính55. 079. 0
10. 0 -ms-43. 05. 1 -webkit-44. 0

Cú pháp CSS

gạch nối. không ai. thủ công. Tự động. ban đầu. thừa kế;

Giá trị tài sản

Giá trịMô tảDemononeTừ không được gạch nốiDemo ❯manualDefault. Các từ chỉ được gạch nối ở ‐ hoặc (nếu cần)Bản trình diễn ❯autoCác từ được gạch nối ở nơi thuật toán đang quyết định (nếu cần)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ế

Web bao gồm nội dung, nội dung bao gồm các từ và các từ có thể dài, rất dài. Mọi người liên quan đến web sớm muộn gì cũng phải đối phó với những từ dài

Thử nghiệm

Duyệt web trên thiết bị di động của tôi hàng ngày, tôi thấy đủ loại “lỗi” với các từ dài – bố cục bị hỏng, các từ bị cắt xén và các tình huống như trong hình trên

Dấu gạch nối #

Giải pháp đầu tiên cho các từ dài là sử dụng dấu gạch nối

Thử nghiệm

.hyphens {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

hỗ trợ trình duyệt. Dấu gạch nối CSS được hỗ trợ trong mọi trình duyệt chính, ngoại trừ tất cả các trình duyệt dựa trên nhấp nháy (Chrome, Opera, Android) – Lỗi Chromium. Tôi cũng đã thử nghiệm Safari 5. 1 cho Windows có thêm dấu gạch nối nhưng trong các từ thử nghiệm của tôi, tất cả chúng đều ở sai vị trí và không có ý nghĩa gì

Hơn nữa, dấu gạch nối nhạy cảm với ngôn ngữ. Bạn phải xác định thuộc tính lang trên phần tử cha và bạn nên lưu ý rằng các ngôn ngữ không phải tiếng Anh không được hỗ trợ tốt trên các trình duyệt

Bạn cũng có thể sử dụng thư viện JavaScript như Hyphenator. js hoạt động với nhiều ngôn ngữ và trên nhiều trình duyệt. Nhược điểm là bạn phải tải thêm rất nhiều JavaScript và đặc biệt đối với văn bản dài hơn, nó sẽ ảnh hưởng đến hiệu suất

ngắt từ #

Vì trình duyệt hỗ trợ dấu gạch ngang không thực sự tốt, hãy thử ngắt từ – một thuộc tính CSS để chỉ định có ngắt dòng trong từ hay không

Thử nghiệm

.word-break {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
}

hỗ trợ trình duyệt. Tính năng ngắt từ CSS được hỗ trợ trong mọi trình duyệt, ngoại trừ Opera Mini và các trình duyệt Opera dựa trên nền tảng cũ. Tôi cũng tìm thấy một số lỗi khi sử dụng ngắt từ kết hợp với dấu gạch nối – sẽ nói thêm về điều đó sau

tràn tràn #

Giải pháp tiếp theo là sử dụng tính năng quấn từ (overflow-wrap), một thuộc tính khác để chỉ định xem trình duyệt có thể ngắt dòng trong từ hay không

Thử nghiệm

.word-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

hỗ trợ trình duyệt. Gói tràn CSS được hỗ trợ trong mọi trình duyệt (ít nhất là tất cả những gì tôi đã kiểm tra và liệt kê trên Tôi có thể sử dụng không). Ghi chú. Một số trình duyệt yêu cầu tên cũ “word-wrap” (chứ không phải “overflow-wrap”) để hoạt động

Dấu chấm lửng #

Một tùy chọn khác để xử lý các từ dài là cắt bớt

Thử nghiệm

.ellipsis {
    overflow:hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

hỗ trợ trình duyệt. Tràn văn bản được hỗ trợ trong mọi trình duyệt chính

Mặc dù kỹ thuật này thoạt nhìn có vẻ phù hợp nhưng nó có nhược điểm. Trước hết, nó sẽ cắt bớt mọi văn bản sau một dòng ngay cả khi bạn sử dụng các từ ngắn hoàn toàn phù hợp và sẽ ngắt thành nhiều dòng hơn. Hơn nữa, các từ có thể bị cắt bớt theo cách mà từ gốc sẽ có nghĩa khác - điều này có thể gây cười nhất hoặc gây khó chịu nhất

Vui lòng không sử dụng tràn văn bản. dấu chấm lửng – cắt ngắn không phải là công việc của CSS. Nếu bạn thực sự cần nó, hãy làm điều đó ở phía máy chủ và chỉ cắt bớt sau các từ đầy đủ

Sự kết luận #

Tôi đã thử nghiệm tất cả các ví dụ trên và sự kết hợp của chúng trong IE7, IE8, IE9, IE10, IE11, Edge, Firefox 39 (Windows, Linux, Mac), Chrome 44 (Windows, Linux, Mac), Opera 30 (Windows, Mac) . 1 (Windows), Android 5 (Nexus 6), Android 4. 4 (Nexus 5), Android 2. 3 (Galaxy S2), iOS 8. 3 (iPhone 6), iOS 7 (iPhone 5S), iOS 6 (iPhone5), Opera Mini (Android 5), Opera Classic (Android 5), Opera Mobile (Android 5) và Windows Phone 8. 1 (Lumia 930) sử dụng thiết bị thực và BrowserStack – Dưới đây là danh sách tất cả 26 trình duyệt và kết quả của chúng

Khi tìm kiếm trên web, có thể bạn sẽ tìm thấy giải pháp sau

.hyphenate {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Mặc dù điều này hoạt động tốt trong hầu hết các trường hợp, nhưng tôi phát hiện ra rằng trong Firefox, dấu gạch nối sẽ không hoạt động (được hỗ trợ khá nhiều) khi kết hợp với ngắt từ. Ngoài ra, vì ngắt từ không được hỗ trợ trong Opera Mini nên nó sẽ không hoạt động ở đó

Vì hỗ trợ của trình duyệt cho tràn bao bì là tuyệt vời, tôi đã thử nghiệm những điều sau đây, sử dụng bao bọc tràn và dấu gạch nối

Giải pháp cuối cùng #

.hyphenate {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Giải pháp này sẽ hiển thị dấu gạch nối cho mọi trình duyệt hỗ trợ nó và sẽ ngắt dòng trong mọi trình duyệt khác – hoàn hảo. Mặc dù tôi đã thử nghiệm giải pháp này trên 26 trình duyệt khác nhau nhưng tôi vẫn không chắc giải pháp này sẽ hoạt động 100% – nếu bạn tìm thấy bất kỳ trường hợp Edge nào, vui lòng cho tôi biết