CSS text-overflow property là 1 trong những thuộc tính đặc biệt trong CSS, được áp dụng để kiểm soát và điều chỉnh hiển thị của văn phiên bản khi thiết yếu hiển thị toàn cục nội dung. ở trong tính này giúp họ quyết định liệu văn bạn dạng có bắt buộc bị giảm bớt, hiển thị lốt chấm ba (ellipsis), hay sửa chữa thay thế bằng chuỗi tùy chỉnh.

Bạn đang xem: Cách sử dụng text-overflow

Lập Trình Viên mời các bạn cùng tham khảo cụ thể nội dung bên dưới. Bài viết này phía bên trong chuyên đề phía dẫn CSS từ cơ phiên bản đến nâng cao tại dự án Phát Triển Website.

CSS text-overflow property là gì?

CSS text-overflow property là một trong những phần của CSS Overflow Module cấp độ 3, cho phép kiểm soát việc hiển thị của văn bản khi câu chữ vượt quá size của form hiển thị. Trực thuộc tính này được áp dụng để chỉ định bí quyết hiển thị của văn bản khi quan trọng hiển thị cục bộ nội dung. Với CSS text-overflow property, chúng ta có thể cắt sút văn bạn dạng hoặc thêm lốt chấm tía để biểu thị rõ ràng hơn cho người dùng.

Ai sẽ cần sử dụng CSS text-overflow property

CSS text-overflow property là 1 trong thuộc tính đặc trưng trong CSS với được sử dụng rộng thoải mái trong các trang website và ứng dụng web. Nó rất hữu dụng để kiểm soát và điều hành việc hiển thị của văn bạn dạng khi văn bản vượt quá form size của khung hiển thị, giúp trang web hoạt động tốt hơn và mang về trải nghiệm bạn dùng giỏi hơn.

CSS text-overflow property là ở trong tính được sử dụng để kiểm soát và điều chỉnh việc hiển thị của văn bạn dạng khi quan yếu hiển thị cục bộ nội dung. ở trong tính này còn có các giá trị như clip, ellipsis, string, initial cùng inherit để ra quyết định cách hiển thị của văn bản.

Giá trị “clip”: Là cực hiếm mặc định, cắt bớt văn bản ở đỉnh và đáy phần tử chứa nó.Giá trị “ellipsis”: Hiển thị vệt chấm tía (…) sống cuối bộ phận chứa văn phiên bản khi ngôn từ vượt quá kích thước của phần tử.Giá trị “string”: thay thế văn bạn dạng bị giảm bớt bằng một chuỗi bởi vì lập trình viên từ bỏ định nghĩa. Chỉ hoạt động trên trình thông qua Firefox.Giá trị “initial”: Đặt cực hiếm của thuộc tính về giá trị mặc định.Giá trị “inherit”: kế thừa giá trị của yếu tắc cha.

Hướng dẫn CSS text-overflow property

Để áp dụng CSS text-overflow property, họ cần phải kết hợp nó với các thuộc tính khác ví như white-space cùng overflow. Dưới đấy là cách thực hiện CSS text-overflow property:

.element white-space: nowrap; overflow: hidden; text-overflow: ellipsis;Các nằm trong tính này được áp dụng để cắt sút nội dung cùng hiển thị lốt chấm cha khi văn bản vượt quá form size của bộ phận chứa nó.

Ví dụ CSS text- overflow property

CSS text-overflow property cho phép bạn chỉ định biện pháp xử lý văn phiên bản khi nó quá quá giới hạn của một phần tử.

Giá trị mang định của nằm trong tính này là clip, tức là văn bạn dạng sẽ bị giảm đi lúc nó quá quá số lượng giới hạn của phần tử.

Để chỉ định bí quyết xử lý văn phiên bản khi nó thừa quá giới hạn của một phần tử, chúng ta có thể sử dụng một trong các giá trị sau:

clip: Văn bạn dạng sẽ bị cắt đi khi nó quá quá giới hạn của phần tử.ellipsis: Văn phiên bản sẽ được thay thế bằng dấu cha chấm (…) khi nó quá quá giới hạn của phần tử.truncate: Văn bản sẽ bị cắt đi ở đầu lúc nó thừa quá giới hạn của phần tử.ellipsis-end: Văn phiên bản sẽ được sửa chữa thay thế bằng dấu ba chấm (…) ở cuối khi nó vượt quá giới hạn của phần tử.ellipsis-middle: Văn phiên bản sẽ được thay thế bằng dấu bố chấm (…) trọng tâm khi nó vượt quá số lượng giới hạn của phần tử.

Ví dụ:

// Để hiển thị dấu ba chấm (...) lúc văn bản vượt quá giới hạn của 1 phần tửdiv text-overflow: ellipsis;Ví dụ này sẽ hiển thị dấu ba chấm (…) khi văn bản vượt quá giới hạn của bộ phận div.

Xem thêm: Tra Từ Loading Terminal Là Gì, Phân Biệt Thuật Ngữ Port Và Terminal

Dưới đấy là một số ví dụ rõ ràng về cách sử dụng CSS text-overflow property:

Để hiển thị dấu ba chấm (…) lúc văn phiên bản vượt quá giới hạn của 1 phần tử, chúng ta cũng có thể sử dụng text-overflow: ellipsis;.

div text-overflow: ellipsis;Để cắt vứt văn bản khi nó thừa quá giới hạn của một trong những phần tử, bạn cũng có thể sử dụng text-overflow: clip;.

div text-overflow: clip;Để cắt vứt văn phiên bản ở đầu khi nó thừa quá số lượng giới hạn của 1 phần tử, chúng ta có thể sử dụng text-overflow: truncate;.

div text-overflow: truncate;Để hiển thị dấu bố chấm (…) nghỉ ngơi cuối lúc văn bản vượt quá số lượng giới hạn của 1 phần tử, chúng ta có thể sử dụng text-overflow: ellipsis-end;.

div text-overflow: ellipsis-end;Để hiển thị dấu ba chấm (…) ở giữa khi văn bản vượt quá số lượng giới hạn của một phần tử, chúng ta cũng có thể sử dụng text-overflow: ellipsis-middle;.

div text-overflow: ellipsis-middle;

Ưu cùng Nhược điểm CSS text- overflow property

Ưu điểm của CSS text-overflow property

Giúp điều hành và kiểm soát và làm chủ hiển thị của văn bản khi câu chữ vượt quá size của khung hiển thị.Tăng tính thẩm mỹ và làm đẹp cho trang web hoặc áp dụng web bằng cách hiển thị vệt chấm bố thay do cắt sút văn bạn dạng một bí quyết ngắn gọn.Có thể áp dụng chuỗi thiết lập cấu hình để thay thế sửa chữa cho văn bạn dạng bị cắt bớt, giúp website trở nên rất dị hơn.

Nhược điểm của CSS text-overflow property

Không hoạt động trên một trong những phiên bản của những trình coi sóc web cũ.Có thể khiến cho nội dung bị giảm quá nhiều, khiến ra khó khăn khi người dùng muốn đọc cục bộ nội dung.

Lời khuyên răn CSS text-overflow property

Khi sử dụng CSS text-overflow property, các bạn nên xem xét đến việc hiển thị rất đầy đủ nội dung để người dùng hoàn toàn có thể dễ dàng đọc với hiểu được thông tin. Đồng thời, các bạn cũng bắt buộc kiểm tra xem nằm trong tính này có chuyển động trên những phiên bạn dạng trình chuẩn y của bạn dùng hay không để bảo vệ tính tương thích.

Kết luận

CSS text-overflow property là giữa những thuộc tính quan trọng trong CSS, giúp kiểm soát và điều hành việc hiển thị của văn phiên bản khi ngôn từ vượt quá kích thước của size hiển thị. Với những giá trị khác biệt như clip, ellipsis với string, bạn có thể quyết định phương pháp hiển thị của văn bạn dạng một phương pháp linh hoạt. Tuy nhiên, bạn cũng cần phải phải quan tâm đến đến tính tương hợp của trực thuộc tính này trên những phiên bản trình duyệt khác biệt để đảm bảo tính ổn định của website hoặc ứng dụng web. 

Xin chào các bạn ! liên tiếp với loạt bài thủ thuật tốt xoay quanh CSS, hôm nay mình sẽ chia sẻ bài viết với chủ thể "Làm cụ nào để cách xử lý được text-overflow".

Đây là sự việc được chúng ta QA rất hay sử dụng để test giao diện. Ví dụ họ thông thường có một format dạng hình 1001 chữ A dính ngay thức thì nhau, nhập một quãng văn phiên bản cực dài mang đến tiêu đề hoặc bất kể phần tử như thế nào đó rất có thể hiển thị text. Và đương nhiên trong quá trình code Front-End (FE) nếu như bạn không cover được những trường thích hợp thực tế hoàn toàn có thể xảy ra đó chắc chắn là QA đang log bug và tặng cho bạn 1 ticket nho bé dại

Dưới phía trên mình đang liệt kê ra một vài rule CSS có thể áp dụng để giải quyết và xử lý vấn đề trên

1. Thực hiện bộ bố nguyên tử white-space, overflow, text-overflow

Bộ 3 này support số đông tất cả trình duyệt đề nghị ta hoàn toàn có thể hoàn toàn yên chổ chính giữa sử dụng

** cùng với Block-element

Đơn giản cùng với các phần tử block bạn chỉ cần thêm các rule sau

element white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* text-overflow: clip; */Trong đó với:

text-overflow: clip; đoạn văn bản overflow có khả năng sẽ bị ẩn đi,text-overflow: ellipsis; phần bị ẩn đi vẫn được sửa chữa bằng dấu "3 chấm"ngoài ra chúng ta còn rất có thể chỉ định chuỗi sửa chữa thay thế ví dụ text-overflow: "----"; tuy vậy nó chỉ tư vấn cho Firefox

Và dĩ nhiên với block-element các bạn chỉ hoàn toàn có thể quan gần cạnh được sự biến đổi khi nội dung container chứa nó không đủ (ví dụ như co cửa sổ trình chăm chú xuống buổi tối đa hoặc phối width cho chỗ tử)

** với Inline-block-element

Trong các trường hợp bạn có nhu cầu cắt chuỗi nhưng lại chỉ muốn phần tử hiển thị sinh hoạt dạng inline-block (ví dụ thẻ nếu để display: block lúc hover ra bên ngoài text vẫn có cursor: pointer; quan sát rất chưa hợp lý) cùng để giảm chuỗi mang đến nó ngoài bộ combo bộ 3 nói trên bạn phải thêm các thuộc tính sau

element display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* text-overflow: clip; */

2. Kết hợp -webkit-line-clamp cùng với overflow

Với line-clamp chúng ta cũng có thể chỉ định được số dòng mong mỏi hiển thị, phần nội dung vượt quá có khả năng sẽ bị ẩn đi và thay thế sửa chữa bởi lốt 3 chấm. Cách sử dụng như sau

element -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-box;Đây là một trong những thuộc tính mới rất lôi cuốn nhưng khôn xiết tiếc chỉ support các trình coi xét nhân webkit, chúng ta cũng có thể xem xét yêu mong của người dùng để làm sử dụng mang đến hợp lý

3. Thực hiện word-break

Ngoài 2 giải pháp ẩn ngôn từ tràn bên trên thì ta còn rất có thể sử dụng word-break nhằm xuống loại văn bản. Trong những số đó hai giá chỉ trị hay được dùng nhất gồm

word-break: break-all; - "To prevent overflow, word may be broken at any character"word-break: break-word; - "To prevent overflow, word may be broken at arbitrary points"

Kết luận

Trên đấy là một vài cách xử lý text-overflow với css thuần tuy rất nhỏ nhưng sẽ giúp bạn cover được rất đôi khi bị QA kiểm tra văn bản. Nếu như bạn còn cách nào hay hơn đừng ngần ngại chia sẻ cho cộng đồng FE nhé.

Nếu thấy nội dung bài viết hay, hãy cho khách hàng +1 upvote nhé. Nếu say mê mình hãy dìm nút follow để hiểu thêm nhiều lắp thêm hay ho hơn.