Đang load dữ liệu
Tham khảo các phần trước tại đây:
Tốn mấy phút đọc: khoảng 20 phút thôi!
Level CSS sau khi đọc xong: tăng thêm 5%
Truncate text 1 dòng thì quá dễ rồi, hầu hết các dev không chuyên Frontend cũng đều biết, chỉ cần vài dòng CSS đơn giản thôi, không cần phải đụng tới JS đếm ký tự rồi cắt chuỗi làm gì cho phức tạp
|
1
2
3
4
5
|
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
|
Cộng với thuộc tính width mà mọi người muốn set, tới độ rộng bao nhiêu thì sẽ cắt text và thay vào dấu ... (ba chấm)
Tuy nhiên, giờ có trường hợp muốn hiển thị nhiều hơn 1 dòng rồi mới cắt text, thế thì phải làm sao nhỉ. Thật là may mắn khi CSS3 giới thiệu 1 thuộc tính giúp chúng ta làm việc đó chính là line-clamp
|
1
2
3
4
5
6
7
|
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 3; /* số dòng cần cắt ở đây */
overflow: hidden;
text-overflow: ellipsis;
|
Mọi chuyện sẽ tốt đẹp, code sẽ work tốt, đoạn text của bạn sẽ được cắt với số dòng như ước muốn, nếu bạn đảm bảo được 3 điều kiện dưới đây:
line-clamp được rồi (ahuhu).-webkit-box-orient: vertical vi phạm rule của Autoprefixer, nên bản CSS được build ra cuối cùng bị mất luôn thuộc tính này, debug trên browser không thấy chúng đâu hoặc thấy code đó, nhưng thực sự browser không đọc được, dẫn đến không thấy dấu ba chấm đâu 😃display: -webkit-box vi phạm rule property-no-vendor-prefix của Stylelint, nếu bạn có bật tính năng này lên.Cuối cùng thì đoạn code sẽ trở thành như sau:
|
1
2
3
4
5
6
7
8
9
|
/* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
/* autoprefixer: off */
-webkit-box-orient: vertical;
line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
|
Vì đây là tip mình tập trung vào việc chia sẻ cách mà
line-clampgiúp mình truncate text nhiều dòng dễ dàng, nên nếu không áp dụng được cho dự án của bạn vì lý do Cross Browsers, thì vẫn còn những cách khác, các bạn có thể tham khảo:
- Sử dụng plugin dotdotdot
- Viết 1 đoạn JS để xử lý
- Bằng 1 đoạn code CSS dài hơn như hướng dẫn ở bài viết này
Có thể bạn cần xem
CSS Framework có thật sự cần thiết như chúng ta nghĩ?
Nếu bạn đã nghe và tìm hiểu về CSS Variables trước đó, cũng như là mình cũng đã có viết 1 bài về CSS Variables trước đây, thì thấy rõ ràng là cú pháp nó khá là dài khi cần gọi 1 biến ra sử dụng
|
1
2
3
4
5
6
7
8
9
10
|
:root {
--primary: #000;
--bg: #fff;
}
html {
background: var(--bg);
color: var(--primary);
}
|
Và nếu bạn là dev Frontend thì chắc chắn bạn cũng khó dứt bỏ được SASS, vì trong SASS vẫn còn nhiều tính năng mà CSS Variables chưa thay thế được và có lẽ bạn đang sử dụng kết hợp cả SASS và CSS Variables, thế thì tại sao không giản lược cú pháp gọi var(--) của CSS Variables thành ngắn gọn hơn bởi viết 1 function của SASS nhỉ?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@function v($var) {
@return var(--#{$var});
}
:root {
--primary: #000;
--bg: #fff;
}
html {
background: v(bg);
color: v(primary);
}
|
P/S: Tips này mình lượm được trên cộng đồng dev.to đấy, đây cũng là 1 nguồn học tập hữu ích cho developer không chỉ giới hạn là Frontend, những bài post chia sẻ trên này thường ngắn, dễ đọc và hiểu ngay, không bị dài dòng như article trong Medium ^^
font-weight: 700 hơn là font-weight: boldHãy định nghĩa 1 chút về những value của thuộc tính font-weight:
Và mình có các cặp value có giá trị như nhau đó là normal – 400 và bold – 700, nhưng trong rất nhiều thiết kế, designer họ có thể chọn 2 loại font-weight là 300 và 600 làm chuẩn, do đó value bằng chữ kia lại không thể hiện đúng chuẩn như bản design được.
Chính vì lý do sử dụng value bằng số đảm bảo chính xác yêu cầu của bản design hơn, nên nó luôn được recommend trong nhiều bộ styleguide về CSS.
Hi vọng mọi người sẽ tăng thêm skill CSS với 3 tips trên.
Nguồn: Sưu tầm từ internet via Devmaster
.png "Lập trình frontend với reacjs (Full)")