Tổng hợp các thủ thuật css (Phần 2)

  1. Cắt text mà giới hạn text hiển thị bằng css.

Trước đây để cắt số lượng text hiển thị cho tiêu đề hoặc các phần mô tả, thường thường là sẽ phải nhờ vào js đếm ký tự rồi cắt chuỗi. Nhưng với một vài thuộc tính css hiện tại hoàn toàn có thể xử lý được.

Với một element với width cụ thể, ta có thể sử dụng thuộc tính css sau để cắt text hiển thị và thêm dấu (…) vào cuối

white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

Tuy nhiên đó là hiển thị trên 1 dòng có thể sử dụng cho tiêu đề nhưng với các đoạn mô tả mà muốn nó hiển thị nhiều dòng thì phải thêm thuộc tính:
[line-clamp] cho nó với value là số dòng cần hiển thị. (nhớ bỏ thằng : white-space:nowrap; nhé :D)

overflow: hidden;
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Vì đây là thuộc tính mới của css3 nên một số trình duyệt không hỗ trợ, ví dụ firefox và IE..

See the Pen Text by Cong (@kcnguyen) on CodePen.

Chúng ta cần disable thuộc tính [Autoprefixer] và [stylelint] của trình duyệt bằng display: -webkit-box; và -webkit-box-orient: vertical; để đảm bảo chạy đúng .

2. Nên dùng font-weight: 700 hơn là font-weight: bold

Hãy định nghĩa 1 chút về những value của thuộc tính font-weight:

  • Value bằng chữ thì có:
    • normal
    • bold
    • bolder
    • lighter
  • Value bằng số thì có:
    • 100
    • 200
    • 300
    • 400
    • 500
    • 600
    • 700
    • 800
    • 900

Thông thường, thói quen từ trước đến nay, phổ biến hay sử dụng : font-weight: Bold hoặc Normal là chính 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.

See the Pen Font-weight by Cong (@kcnguyen) on CodePen.

3. Hiển thị nội dung trong element đang sử dụng thuộc tính [overflow: hidden;]

Đôi khi chúng ta hay gặp phải case như sau: Chúng ta muốn hiển thị submenu hoặc 1 nội dung đang nằm trong 1 element với thuộc tính là overflow:hidden; chắc chắn là nó sẽ chỉ hiển thị nằm gọn trong giới hạn kích thước của element đó. ví dụ:

See the Pen Overflow hidden by Cong (@kcnguyen) on CodePen.

Để hiển thị đúng như mong muốn. giải pháp sẽ như sau:

See the Pen overflow hidden fixed by Cong (@kcnguyen) on CodePen.

Giải pháp là như vậy, việc căn chỉnh chỉn chu thì tùy theo project khi gặp nhé

Leave a Reply

Your email address will not be published. Required fields are marked *