Tiêu đề với dòng css

Bài viết này mình đã xin phép tác giả Ishadowed và xin được viết lại dưới ngôn ngữ tiếng Việt để giúp các bạn dễ hiểu hơn từ bài viết gốc tại đây

Khi bạn làm việc với CSS, đặc biệt là làm những giao diện liên quan đến nội dung như những đoạn chữ ngắn hay dài. Đôi khi trong thiết kế chỉ hiển thị vài ba chữ làm giao diện trở nên rất đẹp, tuy nhiên khi chúng ta đưa vào dự án, nội dung có thể thay đổi dài hơn hoặc rút ngắn việc đi làm giao diện mà chúng ta gặp nhiều vấn đề

Vì sao trong bài viết này mình sẽ đi sâu vào các vấn đề kèm theo đó là các kỹ thuật để xử lý chúng ta một cách hiệu quả để kết quả chúng ta làm ra luôn đạt kết quả tốt nhất nhé. Bắt đầu hủy nào

Vấn đề

Trước khi đi sâu vào kỹ thuật để xử lý các vấn đề về nội dung liên quan đến chữ, thì mình sẽ trình bày một số vấn đề trước cho các bạn dễ hình dung, chẳng hạn như ở bên dưới hình này xử lý chúng ta có một menu dọc (

Như các bạn thấy là nếu bên trái là theo thiết kế rất chi là đẹp, tuy nhiên nếu nội dung dài ra thì sẽ xấu đi một chút. Thì lúc này chúng ta cần đặt ra những câu hỏi như là

• Chúng ta có nên sử dụng kỹ thuật cắt chữ để hiển thị trên một hàng hay không ?
• Hay là chúng ta cứ để nó hiển thị thành nhiều hàng ?

Đó là trường hợp có nhiều chữ hơn là chúng ta muốn nhưng nếu nội dung là một chữ nhưng kéo dài thì sao?

Là một Frontend Developer thì chúng ta phải biết cách giải quyết những vấn đề thế này. Và tất nhiên là trong CSS sẽ có các thuộc tính CSS mà có thể giúp chúng ta xử lý chúng. Như ở trên là mình nói những nội dung dài làm bể bố cục, tuy nhiên nội dung ngắn cũng có thể luôn nhé nhưng sẽ khác một chút, có thể các bạn thắc mắc là nội dung ngắn sao mà gây ảnh hưởng đến giao diện được chứ?

Như hai Nút ở trên khi nội dung dài bên trái thì giao diện rất là đẹp nhưng bên phải khi nội dung chỉ có chữ Ok thì nhìn UI nó kỳ kỳ không ổn chút nào cả. Vì sao phải giải quyết vấn đề này, liệu có thể sử dụng thuộc tính

.element {
  hyphens: auto;
}

4 cho Button được không nhỉ?

Khi bạn vừa mới đọc xong phần vấn đề thì sẽ thấy là không chỉ có những nội dung dài mới làm giao diện bị ảnh hưởng mà những nội dung ngắn cũng sẽ gây ảnh hưởng. Cho nên với việc sử dụng các kỹ thuật trong CSS thì ít nhất chúng ta có thể giảm thiểu tối đa các vấn đề liên quan đến nội dung này. Tiếp tục tìm hiểu thôi nào

Dung dung long

Gói tràn

Thuộc tính

.element {
  hyphens: auto;
}

5 này sẽ giúp chúng tôi xử lý khi nội dung chữ bị tràn ra ngoài khi nó quá dài(ví dụ. aaaaaaaaaaaaaaaaaaaaa), các bạn xem hình dưới đây sẽ rõ

.card {
  overflow-wrap: break-word;
}

dấu gạch nối

Một thuộc tính CSS hay ho khác đó chính là

.element {
  hyphens: auto;
}

6, thuộc tính này sẽ thêm vào dấu – khi chữ dài không vừa với Container bao ngoài, việc thêm dấu – tùy thuộc vào trình duyệt quyết định được thêm vào bất kỳ khúc nhạc nào chúng ta nên có.

.element {
  hyphens: auto;
}

Cắt bớt văn bản

Nghe cụm từ này thì các bạn có thể hiểu là thuộc tính CSS nó sẽ cắt chữ sau đó là thêm dấu 3 chấm vào phía sau nha. Coi hình phát là hiểu ngay

To doing being results as on thì không có thuộc tính nào làm ra được cả mà là bao gồm nhiều thuộc tính CSS kết hợp lại với nhau

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Cắt bớt văn bản nhiều dòng

Như ở trên là khi chúng ta muốn hiển thị chữ một dòng rồi kết hợp dấu 3 chấm, nhưng trường hợp chúng ta muốn hiển thị nhiều dòng rồi mới có dấu 3 chấm phía sau thì làm sao?

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Để kỹ thuật này hoạt động tốt thì bắt buộc phải sử dụng

.element {
  hyphens: auto;
}

8, và thuộc tính

.element {
  hyphens: auto;
}

9 sẽ điền vào giá trị là dòng số mà bạn muốn hiển thị rồi mới có dấu 3 chấm

Tuy nhiên, kỹ thuật này sẽ gặp phải một vấn đề đó là nếu bạn sử dụng tài sản kèm theo thuộc tính

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

0 thì nó sẽ hiển thị kết quả không như mong muốn

Cho nên để giải quyết các bạn nên áp dụng kỹ thuật này cho những thẻ không có

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

0. Mình ví dụ các bạn có HTML như sau

This is long content

Nếu thẻ

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2 có

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

0 và áp dụng kỹ thuật cắt chữ nhiều hàng ở trên thì sẽ bị lỗi đúng không?

This is long content

Cuộn ngang

Đôi khi không phải lúc nào cũng có thể cắt chữ hoặc thêm dấu gạch nối (-) để nội dung là tốt nhất. Ví dụ nếu các bạn đọc các bài mình viết ở blog mình và có các đoạn mã mình chia sẻ trong khung hình hiển thị, thì nếu mình áp dụng các kỹ thuật trên thì sẽ rất kỳ vì code mà rớt dòng từ chữ hay ký tự thì

Ở vấn đề này thì cách tốt nhất là không áp dụng các kỹ thuật mà chúng ta vừa nói đến ở trên mà chỉ đơn giản là cho phép người dùng cuộn ngang được với tính chất

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

7 như thế này

 

Shortcut content

Vấn đề nội dung dài chúng ta đã tìm hiểu và áp dụng các kỹ thuật CSS vào rồi. Ở mục này chúng ta sẽ tìm hiểu các vấn đề liên quan đến nội dung rút gọn nha

Thiết lập độ rộng tối thiểu

Giờ thì quay lại vấn đề mà mình đã đề cập ở đầu bài. Làm sao để có thể xử lý vấn đề này cho Button để giao diện của chúng trông ổn hơn khi Button nội dung quá ngắn

Cách đơn giản nhất là sử dụng thuộc tính

.element {
  hyphens: auto;
}

4 cho Button là xong. Lúc này thì giao diện của chúng ta sẽ ổn hơn rất nhiều

Các ví dụ thực tế

Thẻ hồ sơ

Như giao diện thông tin cá nhân dưới đây thì sẽ nảy sinh nhiều vấn đề, giả sử trong thiết kế chỉ có một hàng nhưng ra bên ngoài nội dung dài quá thì sao ?

/* Solution 1 */
.card__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Solution 2 */
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Chúng ta có giải pháp rồi thì áp dụng vào thôi, cần một dòng thì áp dụng giải pháp 1, còn nhiều dòng thì áp dụng giải pháp 2. thế thôi

Nội dung bài viết

Khi chúng ta làm việc với nội dung hiển thị trên điện thoại, và trong nội dung đó có thẻ

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

9(link) với nội dung cực dài, tất nhiên là giao diện của chúng ta sẽ bị ảnh hưởng thôi

Để giải quyết vấn đề này, chúng ta có thể áp dụng một trong hai cách mà chúng ta đã nói chính là

.element {
  hyphens: auto;
}

5 hoặc

.element {
  hyphens: auto;
}

6

.article-content p {
  overflow-wrap: break-word;
}

Giỏ hàng

Khi các bạn làm việc với thùng hàng, trong thùng hàng có thông tin sản phẩm với giao diện bao gồm hình ảnh, tên sản phẩm và nút xóa, nếu các bạn không chú ý thì lỡ tên sản phẩm quá dài thì sẽ đập vào nút

Để giải quyết nó theo cách đơn giản là dùng

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

2 hay

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

3 là xong xuôi

.product__name {
  margin-right: 1rem;
}

Flexbox và nội dung dài

Đây là một vấn đề rất hay gặp phải khi chúng ta làm việc với flexbox khi chúng ta có nội dung nằm trên một hàng nhưng nội dung một bên quá dài làm ảnh hưởng đến phần tử bên kia như thế này

  

    
Ahmad Shadeed
  
  Follow

.element {
  hyphens: auto;
}

0

Chúng ta có thể áp dụng các kỹ thuật đã có trên bàn nhưng nó lại không hoạt động, nội dung vẫn còn dài và ảnh hưởng đến giao diện

Lý do chính là khi chúng ta làm việc với flexbox thì flex item sẽ không shrink(co re) dưới độ rộng tối thiểu của nội dung. Để giải quyết nó thì chúng ta sẽ áp dụng

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

4 cho thằng bảo ngoài

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

5 là

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

6 là ngon lành

.element {
  hyphens: auto;
}

1

Các bạn có thể thắc mắc là tại sao

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

4 lại hoạt động khi sử dụng cho flex item trong flexbox, mình xin giải thích cho các bạn luôn nha

Giá trị mặc định của thuộc tính

.element {
  hyphens: auto;
}

4 là

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

9, có thể hiểu là được tính là

This is long content

0. Khi một phần tử là mục linh hoạt (phần tử nằm trong phần tử có sử dụng flexbox), thì giá trị của

.element {
  hyphens: auto;
}

4 lúc này không được tính là 0 nữa. Độ rộng tối thiểu của mục linh hoạt lúc này bằng độ rộng của nội dung của nó, tức là nó dài bao nhiêu thì

.element {
  hyphens: auto;
}

4 lúc này sẽ nhốn nháo luôn. Các bạn xem ví dụ này

Lúc này các bạn sẽ thấy là tên người dùng(lớp ví dụ là

This is long content

3) rất là dài cho nên sẽ làm cho nội dung bị tràn và xuất hiện cuộn ngang cho nên lúc này mình áp dụng các kỹ thuật đã học vào để cắt chữ

.element {
  hyphens: auto;
}

2

Nhưng mà do đây là flex item cho nên nó sẽ không hoạt động, vì thế chúng ta phải sử dụng thêm thuộc tính

.element {
  hyphens: auto;
}

4 để giải quyết nó

.element {
  hyphens: auto;
}

3

tada. Chúng ta sẽ có kết quả đẹp như mong muốn

pause

Mình hi vọng với bài viết này sẽ giúp các bạn nâng cao kiến ​​thức hơn, biết thêm nhiều kỹ thuật mới hơn để có thể xử lý nhiều vấn đề về giao diện mà liên quan đến nội dung nhé