Làm cách nào để cắt văn bản trong css?

Khi làm việc trên một trang web hoặc một ứng dụng web, văn bản thường bị bỏ qua, đó là lúc xảy ra sự cố như tràn văn bản. Để giải quyết vấn đề đó, bạn có thể sử dụng một số giải pháp như cắt bớt hoặc tạo dấu chấm lửng cho văn bản (thêm dấu ba chấm) hoặc ngắt dòng văn bản

nội dung trang

1. ;
2. .

Tràn nội dung văn bản khá hay xảy ra trong các trường hợp sau

• Đối với từ dài;
• Đối với URL dài;
• Trên thiết bị di động;
• Đối với các phần tử vùng chứa hẹp;
• Đối với các ô của bảng;
• Đối với các phần tử nút

Tùy thuộc vào các kiểu CSS mà bạn có, phần tràn văn bản thường trông giống như cuộn ngang hoặc nội dung bị cắt

Xem xét vấn đề sau. Có một vùng chứa có chiều rộng cố định trên một trang có liên kết chứa và trỏ đến một URL dài. Văn bản liên kết sẽ tràn vào vùng chứa và sẽ trông lộn xộn, đồng thời có thể tạo ra cuộn ngang không mong muốn trên các kích thước màn hình nhỏ hơn

1. gói văn bản

1. 2 Thuộc tính ngắt từ

Một cách để xử lý văn bản dài trong CSS là ngắt nó xuống dòng tiếp theo. Cách tiếp cận này rất tiện lợi khi bạn không phải lo lắng về văn bản kéo dài nhiều dòng. Khi sử dụng thuộc tính word-break, bạn có hai tùy chọn về cách bọc nó

• break-all - điều này sẽ phá vỡ văn bản khi các ký tự không vừa với vùng chứa
• break-word - điều này sẽ phá vỡ văn bản khi các ký tự không vừa với vùng chứa nhưng nó sẽ giữ nguyên chuỗi từ. GHI CHÚ. đây là API không dùng nữa và không nên sử dụng

.container a {
  word-break: break-all;
}

Hỗ trợ trình duyệt cho thuộc tính word-break. https. // caniuse. com/word-break

1. 2 Thuộc tính tràn-quấn

Một tùy chọn khác để ngắt văn bản là sử dụng thuộc tính overflow-wrap. Thuộc tính này cũng có hai tùy chọn để gói

• .container a {
    overflow-wrap: break-word;
  }
  

  0 - sẽ ngắt văn bản tại bất kỳ điểm nào nếu văn bản không vừa;
• break-word - giống như

  .container a {
    overflow-wrap: break-word;
  }
  

  0 ngoại trừ nó sẽ ngắt các từ dài ở các điểm tùy ý

.container a {
  overflow-wrap: break-word;
}

Hỗ trợ trình duyệt cho thuộc tính overflow-wrap. https. // caniuse. com/wordwrap

2. cắt bớt văn bản

2. 1 Thuộc tính tràn văn bản

Thuộc tính

.container a {
  overflow-wrap: break-word;
}

4 sẽ thêm dấu chấm lửng (sẽ thêm ba dấu chấm) vào văn bản nếu nó không vừa trong vùng chứa. Cách tiếp cận này rất hữu ích nếu bạn muốn giữ văn bản trong một dòng. Tuy nhiên, với một số sửa đổi bổ sung, nó cũng có thể được thực hiện cho văn bản nhiều dòng

Thuộc tính

.container a {
  overflow-wrap: break-word;
}

4 có giá trị

.container a {
  overflow-wrap: break-word;
}

6 phải được đặt trên phần tử cha, liên quan đến văn bản. Hai thuộc tính bổ sung phải được chỉ định là

.container a {
  overflow-wrap: break-word;
}

7 và

.container a {
  overflow-wrap: break-word;
}

8

GHI CHÚ. Tìm hiểu cách xử lý tràn văn bản cho thẻ chọn

Dòng đơn

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

đa tuyến

Đối với giải pháp nhiều dòng, thuộc tính

.container a {
  overflow-wrap: break-word;
}

8 phải được xóa, bằng cách này, văn bản sẽ bị cắt bớt trên dòng khả dụng cuối cùng

.container {
  overflow: hidden;
  text-overflow: ellipsis;
}

Hỗ trợ trình duyệt cho thuộc tính

.container a {
  overflow-wrap: break-word;
}

4. https. // caniuse. com/tràn văn bản

2. 2 Thuộc tính kẹp dây

Một cách tiếp cận hiện đại hơn là thuộc tính

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

1 sẽ giới hạn văn bản vùng chứa ở một số dòng được chỉ định. Cũng như thêm ba dấu chấm ở cuối. Thuộc tính này sẽ chỉ hoạt động với tiền tố nhà cung cấp

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

2 và thuộc tính

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

3 được đặt thành

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

4 hoặc

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

5

Bỏ dòng giải pháp

.container a {
  overflow-wrap: break-word;
}

4, cách tiếp cận này đơn giản và dễ hiểu hơn khi nói đến việc cắt bớt văn bản nhiều dòng. Thuộc tính

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

1 phải được đặt thành phần tử bị tràn và giá trị phải bằng số dòng cần mở rộng