CẮT TẮT VĂN BẢN LÀ QUÁ TRÌNH rút gọn nội dung văn bản. Nếu văn bản bị cắt cụt thì sau đó thường có 3 dấu chấm gọi là dấu chấm lửng. Trên các trang web, có một số cách để rút ngắn nội dung văn bản sao cho phù hợp với một khu vực được chỉ định nhất định. DSC Engineering gần đây đã mở một plugin javascript có tên là Shave để giải quyết vấn đề này

Có 4 phương pháp tiêu chuẩn để giới hạn nội dung văn bản

1. Giới hạn số lượng ký tự trong một trường văn bản hoặc trường hợp khác
2. Cắt văn bản phía máy chủ
3. Sử dụng CSS với

   We went to the store and we found that grapes were on sale. Go purchase grapes today!
   
   

   4
4. Các đường kẹp có

   We went to the store and we found that grapes were on sale. Go purchase grapes today!
   
   

   5

Các phương pháp tiêu chuẩn để giới hạn nội dung văn bản

Giới hạn số lượng ký tự có thể là một cách hay để kiểm soát độ dài của văn bản nhằm đảm bảo văn bản ngắn gọn. Mặt trái của việc giới hạn ký tự là nó có thể ảnh hưởng lớn đến nội dung. Một ví dụ tích cực và tiêu cực về việc giới hạn văn bản là viết một tweet trên twitter. Nó thường rất tốt để buộc tweeter viết ngắn gọn nhưng đôi khi nó cũng bị hạn chế

Cắt xén văn bản trước khi nó được hiển thị trên trang web là một cách rất hiệu quả để đảm bảo rằng văn bản có độ dài nhất định nhưng không có cách nào để đảm bảo rằng kết quả có thể đọc được

tràn văn bản. Dấu chấm lửng khắc phục hầu hết các trường hợp này vì văn bản sẽ không được hiển thị sau một dòng và dấu chấm lửng được trình duyệt thêm vào để gợi ý rằng có nhiều nội dung hơn để đọc

We went to the store and we found that grapes were on sale. Go purchase grapes today!

Sử dụng các phương pháp được nêu ở trên sẽ giải quyết gần như mọi thứ khi nói đến việc cắt bớt văn bản. Tuy nhiên, đối với một số trường hợp Edge, văn bản vẫn cần được cắt bớt. Cạo râu đã được thực hiện cho điều này. Shave là một micro-plugin javascript không phụ thuộc cắt bớt văn bản nhiều dòng để vừa với một phần tử html dựa trên chiều cao tối đa đã đặt

Triển khai tìm kiếm nhị phân

Sau phản hồi trên reddit rằng hiệu suất cắt ngắn thường là một vấn đề khi được thực hiện trên nhiều phần tử, chúng tôi đã triển khai tìm kiếm nhị phân. Tìm kiếm nhị phân là một quá trình chia đôi mọi thứ lặp đi lặp lại để nhanh chóng có được kết quả chính xác hơn. Sau khi thực hiện điều này, chúng tôi thấy rằng Shave có thể cắt khá nhiều văn bản khá nhanh

Tại sao chúng ta sử dụng chiều cao tối đa?

Chúng tôi đã nhận được yêu cầu tìm hiểu chiều cao của phần cần cắt ngắn dựa trên các dòng. Bằng cách sử dụng

We went to the store and we found that grapes were on sale. Go purchase grapes today!

6, chúng tôi cảm thấy rằng nhà phát triển có thể dễ dàng tính toán chiều cao của một số dòng giúp plugin nhẹ hơn đáng kể. Shave không phải là một polyfill sẽ sớm được hỗ trợ đầy đủ. Mục tiêu của Shave là trở thành plugin cắt bớt Dom Element hiệu quả nhất cho các trường hợp cạnh được nêu chi tiết ở trên

sử dụng cạo râu

Kiểm tra Shave tại đây hoặc xem trang đích. Nếu bạn có thể nghĩ ra bất cứ điều gì để cải thiện hơn nữa hiệu suất của plugin bằng cách sử dụng triết lý được mô tả tương tự — chúng tôi rất muốn nghe về nó

Cạo râu làm gì

cạo râu, 1. giữ nguyên văn bản gốc sau khi cắt bớt, 2. không có phụ thuộc, 3. chỉ yêu cầu bộ chọn và chiều cao tối đa và rất nhẹ (~1. 5kb chưa rút gọn), 3. cho phép các chuỗi dấu chấm lửng và tên lớp tùy chỉnh nhưng không quá phức tạp, 4. nhanh và có khả năng cắt ngắn văn bản trong nhiều thành phần một cách nhanh chóng và 5. hỗ trợ các ngôn ngữ không có khoảng cách (Non-ascii)

Shave so với các plugin cắt ngắn khác

Shave biên dịch 50 đoạn văn dài khá nhanh

CodePen Embed - Shave, plugin javascript để cắt bớt văn bản

Shave , Một plugin javascript hiện đại để cắt bớt văn bản trong phần tử html. Thời gian đã trôi qua để Shave cắt bớt 50…

viết mã. io

So sánh thời gian cắt ngắn của Cạo (ở trên) so với dấu chấm lửng. js, trunc8 hoặc jQuery DotDotDot. Shave cũng hỗ trợ các ngôn ngữ không có dấu cách

Cắt bớt văn bản trong tương lai

Hiện tại, quy tắc css cắt ngắn văn bản thành một số dòng nhất định được triển khai trong Safari và Chrome. Nếu nó được triển khai trên toàn cầu, chúng tôi khuyên bạn nên chuyển từ Cạo sang kẹp dây nhưng cho đến lúc đó hãy sử dụng Cạo

Đối với nội dung dài hơn, bạn có thể thêm lớp

We went to the store and we found that grapes were on sale. Go purchase grapes today!

7 để cắt bớt văn bản bằng dấu chấm lửng. Yêu cầu

We went to the store and we found that grapes were on sale. Go purchase grapes today!

8 hoặc

We went to the store and we found that grapes were on sale. Go purchase grapes today!

9

  

    This text is quite long, and will be truncated once displayed.
  




  This text is quite long, and will be truncated once displayed.

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

  

    This text is quite long, and will be truncated once displayed.
  





This text is quite long, and will be truncated once displayed.

0, bạn có hai tùy chọn về cách bọc nó

• 
  
    
  
      This text is quite long, and will be truncated once displayed.
    
  
  
  
  
    This text is quite long, and will be truncated once displayed.
  

  1 - đ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

• 
  
    
  
      This text is quite long, and will be truncated once displayed.
    
  
  
  
  
    This text is quite long, and will be truncated once displayed.
  

  2 - đ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

  

    This text is quite long, and will be truncated once displayed.
  




  This text is quite long, and will be truncated once displayed.

0. 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 dòng văn bản là sử dụng thuộc tính

  

    This text is quite long, and will be truncated once displayed.
  




  This text is quite long, and will be truncated once displayed.

4. 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;

• 
  
    
  
      This text is quite long, and will be truncated once displayed.
    
  
  
  
  
  
  This text is quite long, and will be truncated once displayed.
  

  2 - 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

  

    This text is quite long, and will be truncated once displayed.
  




  This text is quite long, and will be truncated once displayed.

4. 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 ________ 54 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

.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

3

đ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

5

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

31 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

32 và thuộc tính

33 được đặt thành

34 hoặc

35

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

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

Cắt xén văn bản là gì?

Làm cách nào để ẩn văn bản trong HTML bằng CSS?