nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
  • Đăng nhập
logo nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
nhat.dev
No Result
View All Result
Home Lập trình

Một số cách xử lý text-overflow với CSS

Nhat Tran by Nhat Tran
7 Tháng Chín, 2019
Một số cách xử lý text-overflow với CSS
234
SHARES
3.5k
VIEWS
Chia sẻ lên FacebookChia sẻ lên Twitter

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

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

Có thể bạnquan tâm

15 câu lệnh cần biết khi thao tác với server Linux

JavaScript Memoization là gì? Tối ưu Javascript

Redis là gì?

Dưới đây mình sẽ liệt kê ra một vài rule CSS có thể áp dụng để giải quyết vấn đề trên

1. Sử dụng bộ ba nguyên tử white-space, overflow, text-overflow

Bộ 3 này support hầu như tất cả trình duyệt nên ta có thể hoàn toàn yên tâm sử dụng

** Với Block-element

Đơn giản 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 sẽ bị ẩn đi,
  • text-overflow: ellipsis; phần bị ẩn đi sẽ được thay thế bằng dấu ‘3 chấm’
  • ngoài ra bạn còn có thể chỉ định chuỗi thay thế ví dụ text-overflow: "----"; tuy nhiên nó chỉ support cho Firefox

Và đương nhiên với block-element bạn chỉ có thể quan sát được sự thay đổi khi nội dung container chứa nó không đủ (ví dụ như co cửa sổ trình duyệt xuống tối đa hoặc set width cho phần tử)

** Với Inline-block-element

Trong nhiều trường hợp bạn muốn cắt chuỗi nhưng chỉ muốn phần tử hiển thị ở dạng inline-block (ví dụ thẻ <a> nếu để display: block khi hover ra ngoài text vẫn có cursor: pointer; nhìn rất không hợp lý) và để cắt chuỗi cho nó ngoài combo bộ 3 kể trên bạn cầ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 với overflow

Với line-clamp bạn có thể chỉ định được số dòng muốn hiển thị, phần nội dung vượt quá sẽ bị ẩn đi và thay thế bởi dấu 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 thuộc tính mới rất hay nhưng rất tiếc chỉ support các trình duyệt nhân webkit, bạn có thể xem xét yêu cầu của người dùng để sử dụng cho hợp lý

3. Sử dụng word-break

Ngoài 2 cách ẩn nội dung tràn trên thì ta còn có thể sử dụng word-break để xuống dòng văn bản. Trong đó hai giá trị hay sử 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 nhiều khi bị QA test văn bản. Nếu 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 bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn.

Xin cảm ơn và hẹn gặp lại ở các bài viết sau !

Source: Viblo
Tags: cssxử lý text
Bài viết trước

Font Awesome 5 Duotone Icons là gì? Có gì nổi bật

Bài viết sau

Hướng dẫn cài macOS trên Laptop, PC 2019

Nhat Tran

Nhat Tran

Chia sẻ vài thứ hay ho bản thân tìm hiểu và tìm kiếm được đến mọi người

Bài viết sau
Hướng dẫn cài macOS trên Laptop, PC 2019

Hướng dẫn cài macOS trên Laptop, PC 2019

Subscribe
Notify of
guest
guest
0 Comments
Inline Feedbacks
View all comments

Recommended.

Lập trình viên kiếm tiền bằng cách nào?

Lập trình viên kiếm tiền bằng cách nào?

26 Tháng Mười Hai, 2019
Những cách tối ưu hoá JavaScript mà mọi lập trình viên đều phải biết

JavaScript Memoization là gì? Tối ưu Javascript

28 Tháng Hai, 2021

Trending.

Hướng dẫn cài macOS trên Laptop, PC 2019

Hướng dẫn cài macOS trên Laptop, PC 2019

6 Tháng Chín, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Hướng dẫn tạo bộ cài vanilla hackintosh dễ dàng nhất

6 Tháng Ba, 2020
Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

2 Tháng Mười Một, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Phần cứng phù hợp với Hackintosh macOS

30 Tháng Mười Một, 2019
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Cài đặt Clover vào ổ cứng sau khi cài macOS

30 Tháng Mười Một, 2019
nhat.dev

© 2019 nhat.dev

Chia sẻ chút kiến thức, kinh nghiệm, thủ thuật mà bản thân đã tìm hiểu và đọc được với mọi người

  • About me
  • Privacy & Policy
  • Advertise
  • Contact

Theo dõi tôi

No Result
View All Result
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ

© 2019 nhat.dev

Xin chào

Sign In with Facebook
OR

Đăng nhập bằng SSO Nhatdev

Quên mật khẩu?

Create New Account!

Fill the forms below to register

All fields are required. Đăng nhập

Lấy lại mật khẩu

Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

Đăng nhập