Làm cách nào để ngắt văn bản thành nhiều dòng trong css?

Khi bạn tạo bố cục trong CSS, điều quan trọng là phải tính đến và kiểm tra nội dung văn bản ngắn và dài. Có ý tưởng rõ ràng về những việc cần làm khi văn bản có độ dài khác nhau có thể ngăn ngừa rất nhiều sự cố không mong muốn

Có nhiều tình huống khi thêm hoặc bớt một từ có thể thay đổi giao diện của thiết kế hoặc thậm chí tệ hơn, nó có thể làm hỏng thiết kế và khiến thiết kế không thể truy cập được. Trong những ngày đầu học CSS, tôi đã đánh giá thấp tác dụng của việc thêm hoặc xóa một từ. Trong bài viết này, tôi sẽ giới thiệu các kỹ thuật khác nhau mà bạn có thể sử dụng ngay để xử lý các độ dài văn bản khác nhau trong CSS

Vấn đề

Trước khi đi vào các kỹ thuật xử lý nội dung văn bản, tôi xin làm sáng tỏ vấn đề trước. Giả sử rằng chúng ta có điều hướng dọc

Độ dài tên có thể thay đổi, đặc biệt nếu bạn đang làm việc trên một trang web đa ngôn ngữ. Trong ví dụ trên, tên được gói gọn trong một dòng thứ hai khi nó trở nên dài hơn. Dưới đây là một số câu hỏi

• Chúng ta có nên cắt bớt văn bản?
• Chúng ta có nên quấn thành nhiều dòng không?

Đó là trường hợp có nhiều từ hơn dự kiến, nhưng điều gì xảy ra khi một từ quá dài?

Là một nhà phát triển front-end, điều quan trọng là phải quyết định điều gì sẽ xảy ra trong những trường hợp như vậy. May mắn thay, có một số thuộc tính CSS được thiết kế chỉ để giải quyết những vấn đề như vậy

Thêm vào đó, vấn đề không chỉ nằm ở nội dung dài, mà nội dung ngắn cũng có thể làm hỏng giao diện người dùng hoặc ít nhất là làm cho nó trông kỳ lạ. Xem ví dụ bên dưới

Nút có dòng chữ “ok” có chiều rộng rất nhỏ. Tôi không nói rằng đây là một vấn đề nghiêm trọng, nhưng nó có thể làm cho nút trông yếu hoặc khó bị chú ý

Chúng ta nên làm gì trong trường hợp như vậy?

Như bạn vừa đọc, nó không phải là về nội dung dài. Ngoài ra, nội dung ngắn có thể gây ra vấn đề. Bằng cách sử dụng một số kỹ thuật CSS, ít nhất chúng ta có thể giảm thiểu các vấn đề về nội dung dài hay ngắn

Nội dung dài

Bây giờ bạn đã có ý tưởng về các vấn đề, hãy cùng tìm hiểu các kỹ thuật CSS cung cấp giải pháp để xử lý nội dung dài

bọc tràn

Thuộc tính

.element {
  hyphens: auto;
}

3 hướng dẫn trình duyệt đặt dấu ngắt trong trường hợp một từ không thể vừa với vùng chứa của nó

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

dấu gạch nối

Thuộc tính CSS cho phép trình cung cấp quyết định cách gạch nối các từ khi nội dung văn bản bao quanh nhiều dòng. Việc gạch nối có thể được thực hiện thủ công bằng cách chèn một biểu tượng HTML hướng dẫn trình duyệt nếu nó cần gạch nối một từ

.element {
  hyphens: auto;
}

Mặc dù vậy, điều quan trọng cần lưu ý là

.element {
  hyphens: auto;
}

4 sẽ gạch nối bất kỳ từ nào không thể vừa trong một dòng. Điều đó nghĩa là gì?

Lưu ý cách trình duyệt gạch nối một từ trong khi nó có thể được chuyển sang dòng tiếp theo một cách đơn giản. Khi sử dụng

.element {
  hyphens: auto;
}

4, không quan trọng nếu một từ có thể vừa vặn trong thùng chứa của nó hay không

cắt ngắn văn bản

Cắt bớt có nghĩa là thêm dấu chấm vào cuối câu để cho biết có nhiều nội dung văn bản hơn

Không có thuộc tính

.element {
  hyphens: auto;
}

6 hay thứ gì đó, nhưng đó là sự kết hợp của một số thuộc tính CSS thực hiện công việc cho chúng tôi

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

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

Nếu bạn muốn cắt bớt nhiều dòng, bạn nên sử dụng thuộc tính

.element {
  hyphens: auto;
}

7

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

Để kỹ thuật này hoạt động, phải sử dụng

.element {
  hyphens: auto;
}

8.

.element {
  hyphens: auto;
}

9 chỉ định số lượng dòng tối đa để tính năng cắt bớt hoạt động

Nhược điểm của kỹ thuật này là nó có thể dễ dàng thất bại nếu bạn muốn thêm

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

0 cho phần tử. Khi bạn thêm phần đệm, điều này sẽ dẫn đến việc hiển thị một phần của dòng tiếp theo, phần này được cho là bị cắt bớt. Xem hình bên dưới

cuộn ngang

Đôi khi, việc ngắt hoặc gạch nối một từ không phải lúc nào cũng thực tế. Ví dụ: mã javascript có thể trở nên khó đọc khi một từ dài được chia thành một dòng mới. Trong trường hợp như vậy, cho phép cuộn ngang sẽ giúp trải nghiệm đọc tốt hơn

.code {
  overflow-x: auto;
}

đệm

Trong một số trường hợp, bạn có thể quên thêm

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

0 cho đến khi bạn nhận thấy vấn đề về hình ảnh. Hãy xem xét những điều sau đây

Chúng tôi có một danh sách các hộp kiểm và một trong số chúng rất gần với mục anh chị em của nó. Lý do điều này xảy ra là không có máng xối trên lưới. Đây là một ví dụ thực tế từ trang web Techcrunch

nội dung ngắn

Tôi biết rằng điều này có thể không phổ biến đối với bạn, nhưng đó là điều quan trọng cần xem xét khi thiết kế và xây dựng giao diện người dùng

Đặt chiều rộng tối thiểu

Hãy quay lại ví dụ mà tôi đã chỉ cho bạn ở đầu bài viết. Làm thế nào chúng ta có thể nâng cao điều này và làm cho nút trông đẹp hơn?

Chúng ta có thể giải quyết vấn đề này bằng cách thêm một

.element {
  hyphens: auto;
}

2 vào nút. Bằng cách đó, nó sẽ không đi dưới chiều rộng đó

Bây giờ bạn đã có ý tưởng về sự cố và các giải pháp của nó, hãy cùng khám phá một số trường hợp sử dụng và ví dụ từ khắp nơi trên web

Các trường hợp sử dụng và ví dụ

thẻ hồ sơ

Đây là một ví dụ phổ biến về nội dung dài. Thật khó để dự đoán độ dài của một cái tên. Làm thế nào chúng ta nên đối phó với nó?

/* 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;
}

Bạn có thể cắt bớt văn bản bằng một dòng hoặc chỉ cắt ngắn khi văn bản dài hai dòng

mục điều hướng

Khi xử lý bố cục đa ngôn ngữ, độ dài nội dung sẽ thay đổi. Xem xét ví dụ sau

Mục điều hướng “Giới thiệu” lớn hơn trong LTR (từ trái sang phải) so với RTL (từ phải sang trái). Trong RTL, mục trông quá nhỏ. Có một khu vực có thể nhấp nhỏ không tốt cho UX. Chúng ta có thể làm gì?

.nav__item {
  min-width: 50px;
}

Để biết thêm chi tiết về sự khác biệt giữa các từ, tôi đã trình bày chi tiết trong hướng dẫn 101 kiểu dáng RTL của mình

Nội dung bài viết

Có một từ dài hoặc một liên kết là phổ biến, đặc biệt là trên điện thoại di động. Hãy xem xét những điều sau đây

Chúng tôi có một từ dài đang làm tràn bộ chứa của nó và gây ra hiện tượng cuộn ngang. Như bạn đã học, bạn có thể giải quyết vấn đề này bằng cách sử dụng

.element {
  hyphens: auto;
}

3 hoặc

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

4

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

giỏ hàng

Tên sản phẩm có thể thay đổi từ một từ đến nhiều dòng. Trong ví dụ này, tên sản phẩm quá gần với nút xóa do không thêm đủ khoảng cách giữa chúng

Giải pháp có thể được thực hiện bằng cách thêm phần đệm hoặc lề. Tùy thuộc vào bạn và bối cảnh, nhưng để đơn giản, tôi sẽ chỉ cho bạn giải pháp

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

5

.product__name {
  margin-right: 1rem;
}

Flexbox và nội dung dài

Có một hành vi xảy ra với flexbox và nội dung dài khiến một phần tử tràn phần tử gốc của nó. Xem xét ví dụ sau

 class="user">
   class="user__meta">
     class="user__name">Ahmad Shadeed
  

.element {
  hyphens: auto;
}

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

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

.element {
  hyphens: auto;
}