Công cụ Cắt Ngắn Văn Bản

«Một ký tự» thực sự có nghĩa là gì

Người dùng nhìn thấy một «ký tự» trong khi JavaScript nhìn thấy ba giá trị. Chuỗi «👨‍👩‍👧‍👦» (emoji gia đình bốn người) là một cụm grapheme, bảy điểm mã Unicode được nối bởi Zero-Width Joiner (U+200D), và mười một đơn vị mã UTF-16. Đó là lý do tại sao trong JavaScript "👨‍👩‍👧‍👦".length === 11. Định nghĩa có thẩm quyền sống trong Phụ lục Tiêu chuẩn Unicode #29 «Phân đoạn Văn bản Unicode» (phiên bản hiện tại 15.0, tháng 9 năm 2022), xác định ranh giới cụm grapheme, ranh giới từ và ranh giới câu. JavaScript hiện đại tiết lộ UAX #29 thông qua Intl.Segmenter, được chuẩn hóa trong ECMAScript 2022 và được vận chuyển trong mọi trình duyệt kể từ Firefox 125 (tháng 4 năm 2024); Chrome có nó từ phiên bản 87 (tháng 11 năm 2020) và Safari từ 14.1 (tháng 4 năm 2021). Sử dụng new Intl.Segmenter('vi', { granularity: 'grapheme' }) để đếm theo cách con người đếm.

Giới hạn ký tự trên các nền tảng bạn vận chuyển đến

• Mô tả meta Google Search: không có giới hạn được áp dụng, nhưng đoạn trích SERP thường cắt ở 155-160 ký tự trên máy tính để bàn và khoảng 120 trên di động. Kể từ năm 2018, hướng dẫn của Google đã nhấn mạnh rằng đoạn trích có thể được rút ra từ bất kỳ đâu trong trang, không chỉ thẻ <meta name="description">.
• Twitter / X: 280 ký tự cho tài khoản miễn phí kể từ tháng 11 năm 2017, 25 000 cho X Premium kể từ tháng 5 năm 2023. Quy tắc đếm đặc biệt: bất kỳ URL nào tính là 23 ký tự bất kể độ dài, và ký tự CJK tính là 2 mỗi cái.
• SMS: 160 ký tự mỗi tin nhắn trong bảng chữ cái GSM 7-bit (3GPP TS 23.038), 70 ký tự trong UCS-2 (UTF-16) cho văn bản không phải GSM bao gồm hầu hết emoji và chữ viết không phải Latin. SMS nhiều phần sử dụng 153 / 67 mỗi phần vì User Data Header tiêu thụ 7 ký tự payload.
• Mô tả Open Graph (Facebook): khuyến nghị 110-200 ký tự, cắt thường ở 300.
• Mô tả Twitter Card: tối đa 200 ký tự, cắt với dấu chấm lửng vượt ra ngoài.
• Bài đăng LinkedIn: tổng cộng 3 000 ký tự, nhưng cắt «xem thêm» kích hoạt ở khoảng 210 ký tự trên máy tính để bàn.
• Phần thân thông báo Web Push: không có giới hạn chính thức, nhưng iOS cắt ở khoảng 110 ký tự và Android hiển thị khoảng 200.
• Cơ sở dữ liệu VARCHAR(N): trong MySQL với đối chiếu utf8 cũ, N là byte; với utf8mb4, N là ký tự. PostgreSQL varchar(N) luôn là ký tự.

Ranh giới từ không chỉ là split(' ')

Trình cắt ranh giới từ ngây thơ chia đầu vào trên /\s+/ và cắt trước từ đầu tiên đẩy bạn vượt quá giới hạn. Điều đó hoạt động cho tiếng Anh. Nó thất bại trên tiếng Trung, Nhật, Hàn và Thái, không ai sử dụng khoảng trắng giữa các từ: toàn bộ đầu vào kết thúc như một «từ» duy nhất, vì vậy trình cắt hoặc giữ tất cả hoặc cắt tất cả. Tiếng Ả Rập sử dụng khoảng trắng nhưng nối các hình thức chữ cái theo cách thay đổi vị trí ranh giới. Intl.Segmenter với granularity: 'word' áp dụng thuật toán ranh giới từ UAX #29 và tạo ra các vết cắt chính xác cho mọi ngôn ngữ. Nó cũng phân biệt các đoạn «giống từ» (trả về isWordLike: true) từ các đoạn dấu câu và khoảng trắng, vì vậy bạn có thể tìm thấy ranh giới từ cuối cùng trước ngân sách ký tự của mình với một lần truyền qua các đoạn.

Cắt CSS: text-overflow và line-clamp

Nếu mục tiêu là cắt về mặt thị giác trong khi giữ toàn bộ văn bản trong DOM (để nó vẫn có sẵn cho trình đọc màn hình, công cụ tìm kiếm và sao chép-dán), hãy sử dụng CSS. Cắt một dòng yêu cầu ba thuộc tính cùng nhau: overflow: hidden; white-space: nowrap; text-overflow: ellipsis;. text-overflow: ellipsis được định nghĩa trong Mô-đun CSS Basic User Interface Cấp 4 (W3C Candidate Recommendation tháng 8 năm 2021) và đã được vận chuyển trong mọi trình duyệt kể từ Firefox 7 (tháng 9 năm 2011); Internet Explorer 6 đã có nó từ tháng 8 năm 2001. Cắt nhiều dòng sử dụng display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;. Thuộc tính -webkit-line-clamp có từ WebKit 2009 và hiện được định nghĩa trong Mô-đun CSS Overflow Cấp 3 (W3C Working Draft). line-clamp không tiền tố được vận chuyển trong Safari 18 (tháng 9 năm 2024) và Firefox 125 (tháng 4 năm 2024); luôn bao gồm dạng -webkit- làm dự phòng. Hạn chế quan trọng: Cắt CSS hoàn toàn mang tính trình bày. Văn bản đầy đủ vẫn trong mã nguồn HTML, vì vậy đoạn trích SEO, tóm tắt email và chỉ mục tìm kiếm do JS điều khiển đều thấy chuỗi không bị cắt.

Sai lầm phổ biến

• Sử dụng str.length cho giới hạn. String.prototype.length của JavaScript trả về đơn vị mã UTF-16, không phải ký tự. Trạng thái với ba emoji ngón tay cái «👍👍👍» báo cáo length === 6; Twitter đếm nó là 3.
• Không trừ độ dài hậu tố. Nếu ngân sách của bạn là 160 ký tự và bạn thêm …, phần thân văn bản của bạn có 159 ký tự để làm việc. Nhiều triển khai ngây thơ tạo ra các chuỗi vượt quá giới hạn.
• Chia khoảng trắng CJK và Thái. Các ngôn ngữ không có khoảng trắng giữa các từ trở nên không thể chia. Sử dụng Intl.Segmenter với granularity: 'word'.
• Cắt trước khi loại bỏ dấu câu cuối. «Xin chào, thế giới!» được cắt thành 8 ký tự một cách ngây thơ thành «Xin chào,», hoặc «Xin chào…» nếu thông minh và loại bỏ dấu phẩy cuối.
• Cắt bên trong thẻ HTML. Cắt <a href="long-url">text</a> thành 30 ký tự tạo ra một chuỗi với thẻ chưa đóng. Hoặc loại bỏ HTML trước hoặc sử dụng trình cắt có ý thức về DOM.
• Ba dấu chấm vs một dấu chấm lửng. Dấu chấm lửng Unicode … (U+2026) là một ký tự, ba dấu chấm ... là ba. Chọn cái đúng cho bộ đếm ký tự của nền tảng.
• Tin tưởng <input maxlength> để xác thực phía máy khách. HTML Living Standard đếm đơn vị mã UTF-16, vì vậy người dùng dán emoji thấy số đếm khác với trình xác thực backend nhận biết Unicode của bạn. Xác thực phía máy chủ.

Thêm câu hỏi thường gặp

Tại sao Twitter đếm URL của tôi là 23 ký tự ngay cả khi nó dài hơn nhiều?

Twitter gói mọi URL qua bộ rút gọn t.co của nó để phân tích và phát hiện lạm dụng, vì vậy nó tính phí mọi URL ở độ dài trường hợp xấu nhất của bộ rút gọn: 23 ký tự cho HTTPS. Nếu bạn viết một URL 100 ký tự, nó được tính là 23 trong giao diện Twitter. Quy tắc tương tự áp dụng cho siêu dữ liệu Twitter Card. Thư viện mã nguồn mở twitter-text (Twitter, MIT) triển khai quy tắc chính xác nếu bạn cần mô phỏng chính xác byte.

Công cụ này có tôn trọng các ngôn ngữ RTL như tiếng Ả Rập và Do Thái không?

Nội dung văn bản được bảo tồn bao gồm các điểm đánh dấu bidi (hai chiều) của nó. Cắt hoạt động trên các ký tự theo thứ tự logic, vì vậy cắt câu tiếng Ả Rập ở ký tự 100 sẽ cắt ở ký tự logic thứ 100 (cái mà trình đọc màn hình sẽ thông báo đầu tiên). Thứ tự hiển thị có thể đảo ngược về mặt thị giác do luồng phải sang trái, nhưng chuỗi cơ bản nhất quán.

Tại sao SMS bị cắt của tôi vẫn được chia thành ba phần ở 161 ký tự?

SMS sử dụng mã hóa GSM 7-bit cho văn bản chỉ tiếng Latin, vừa 160 ký tự trong một phân đoạn. Nhưng bất kỳ ký tự nào ngoài GSM-7, bao gồm dấu nháy uốn «thông minh» từ tự động sửa (U+2018 / U+2019), dấu chấm lửng Unicode (U+2026), hoặc emoji, buộc toàn bộ thông điệp đến mã hóa UCS-2 ở 70 ký tự mỗi phân đoạn. Nếu thông điệp 160 ký tự bị cắt của bạn chứa một dấu nháy thông minh, nhà cung cấp dịch vụ sẽ chia nó thành ba phần UCS-2 70 ký tự. Thay thế dấu nháy thông minh bằng dấu nháy ASCII cho SMS.

Tôi có thể cắt văn bản định dạng HTML mà không phá vỡ các thẻ không?

Không an toàn với một vết cắt đếm ký tự. Hoặc loại bỏ các thẻ HTML trước (qua DOMParser hoặc bộ phân tích phía máy chủ), cắt văn bản thuần, sau đó tùy chọn gói lại; hoặc sử dụng một trình cắt có ý thức về DOM đi qua cây nút và sao chép các tiền tố nút văn bản đầy đủ. Regex thuần trên chuỗi HTML không an toàn (HTML không phải là ngôn ngữ chính quy).

Có gì được gửi đến máy chủ không?

Không. Văn bản bạn dán, giới hạn bạn chọn, hậu tố bạn đặt và đầu ra bị cắt đều được xử lý trong JavaScript của trình duyệt của bạn. Không có cuộc gọi mạng nào được thực hiện và không có bản sao đầu vào của bạn được lưu trữ. Mở tab Mạng trong DevTools để xác minh.