Xử lí text với text-overflow trong CSS (xử lí text bằng text-overflow)

@muoi
@muoi

Xử lí text bằng Text-Overflow trong CSS

Tạo sao phải xử lí text? 😏

Trong quá trình thiết kế giao diện web bằng HTML và CSS,... chắc hẳn đã nhiều lần các ông gặn trường hợp text quá dài so với nhu cầu thực tế. Ví vụ
Demo cái đơn giản zui zui thui!
Như vậy, text vượt quá chiều dài của div. Hoặc là như thế này
Demo cái đơn giản zui zui thui lần thứ hai😆!
Như các ông thấy. Vượt cả qua luôn chiều cao giới hạn tối đa được lập trình viên thiết lập. Hoặc đơn giản hơn là tình trạng các ông "cân" chuẩn một tiêu đề dài bao nhiêu đấy là chuẩn. Nhưng khi tới tay người dùng. Tiêu đề được người dùng đặt dài "bát ngát", gây "vỡ trận", hay text của các ông có chứa một đoạn text dài "dằng dặc" như link của một file ảnh nào đó. Và nó dài quá là dài. Làn tràn ra cả ngoài khung của thẻ cha, và vô số những tình huống khác xảy ra. Vậy là thế nào để xử lí tình huống trên?
Xử lí text bằng Text-Overflow trong CSS

Sử dụng thuộc tính Text-Overflow để xử lí text

Các ông nhấn vào nút này và nhìn lên hai bản demo phía trên? Có thấy gì không? Hừm... text-overflow đấy.
Và cách sử dụng thuộc tính Text-Overflow cũng khác là đơn giản
white-space:nowrap;
overflow: hidden; /* Cái này bắt buộc phải có */
text-overflow: ellipsis|clip|initial|inherit|string;
Trong đó
ellipsis (text-overflow: ellipsis) hiển thị dấu chấm lửng thay cho nội dung bị tràn
clip (text-overflow: clip) chỉ đơn giản là ẩn chuỗi bị tràn
initial (text-overflow: initial) đặt lại về trạng thái mặc định của nó
inherit (text-overflow: inherit) hiển thị theo giá trị của phần tử cha bao quanh nó.Phụ thuộc vào phần tử cha có nghĩa là giá trị text-overflow: inherit của phần tử cha sẽ quyết định giá trị của nó
string (text-overflow: string) hiển thị bằng chuỗi string thay thế (khá vô dụng😃) vì không phải tất cả trình duyệt đều hỗ trợ

Ví dụ sử dụng

text-overflow: clip;
Đây là một ví dụ đơn giản về Text-Overflow trên Code Vô Đối 
text-overflow: inherit;
Đây là một ví dụ đơn giản về Text-Overflow trên Code Vô Đối 
text-overflow: ellipsis;
Đây là một ví dụ đơn giản về Text-Overflow trên Code Vô Đối 
text-overflow: "---"; /* String */
Đây là một ví dụ đơn giản về Text-Overflow trên Code Vô Đối 
text-overflow: initial;
Đây là một ví dụ đơn giản về Text-Overflow trên Code Vô Đối

Vấn đề mới

Tuy nhiên nếu bạn nào để ý khung demo thứ hai mà tớ để phía trên cùng. Thì khi nhấn nút Test. Mặc dù text tràn khung đã bị ẩn nhưng vẫn không xuất hiện dấu ... mặc dù tớ thiết lập giá trị là text-overflow: ellipsis;

Hừm !!!🤔🤨Điều này xảy ra là bởi vì text-overflow: ellipsis; chỉ hoạt động đúng nếu có hai giá trị 
white-space: nowrap; /* Không cho xuống dòng */
overflow: hidden; /* ẩn text bị tràn */
đi kèm. Như vậy là tớ đã thiếu mấy giá trị white-space: nowrap;. Nhưng một vấn đề thứ hai lại xảy ra.

Sử dụng giá trị text-overflow:ellipsis cho dòng text thứ n

Nhiều trường hợp. Người ta thay vì muốn text-overflow thành ... ở dòng thứ nhất, thì người ta lại muốn ở dòng thứ 2, thứ 3 hoặc thứ n thì phải làm thế nào?
Vấn đề này sẽ được giải quyết đơn giản bằng những cú pháp CSS sau:
display: -webkit-box;
-webkit-line-clamp: n; /* n là vị trí dòng muốn text-overflow có tác dụng */
-webkit-box-orient: vertical;
/* height -> Không được sử dụng thuộc tính hieght */
/* max-height -> Cho phép sử dùng */
/* chiều cao max-height không được phép nhỏ hơn tổng chiều 
cao của n dòng text */
Ví dụ tui muốn ở dòng thứ 3.

Có con chim vành khuyên nhỏ hót răng mà hay rứa chu choa mọa ơi. Chim ơi là chim! Chu choa chim khủng quá

Lưu ý: không phải trình duyệt nào cũng hỗ trợ những cú pháp CSS trên. Ngoại trừ các trình duyệt nhân Webkit. Tuy nhiên trong tương lai gần nó sẽ phổ biến trên hầu hết các trình duyệt.
Đối với một số thẻ có thuộc tính hiển thị mặc định là inline thì text-overflow đôi khi mất tác dụng. Do đó cần chuyển về hiển thị block hoặc inline-block nhưng thiết lập thêm giá trị width và max-width
Code Vô Đối bản quyền bài viết của Code Vô Đối nhé thằng ăn cắp. https://codevodoi.blogspot.com Đit_cu_may !
CSS HTML