{tocify} $title={Table of Content}
Khái niệm và Syntax
text-overflow là một thuộc tính của CSS giúp chỉ định cách nội dung mà bị tràn sẽ được ẩn để báo hiệu cho người dùng biết rằng nó chưa hiển thị hết. Nó có thể bị ẩn - mặc định (clip), hiển thị dấu chấm lửng (...) - ellipsis, hoặc hiển thị một chuỗi tùy chỉnh (với chuỗi tùy chỉnh hiện tại chỉ sử dụng được trên Firefox).
text-overflow: clip|ellipsis|string|initial|inherit;Để text-overflow hoạt động, bắt buộc phải sử dụng kèm thêm 2 thuộc tính:
white-space: nowrap;
overflow: hidden;Cách sử dụng
HTML<div style="width: 370px;margin:auto;border: 1px solid #ccc;border-radius:5px;padding:15px;">
<p class="text-overflow">
<a href="#" class="text-overflow-inline-block">The text-overflow property</a> specifies how overflowed content AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA that is not displayed should be signaled to the
user. It can be clipped, display an ellipsis (...), or display a custom string.
</p>
</div>
Sử dụng cho block element
CSS.text-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Sử dụng cho inline-block
CSS.text-overflow-inline-block {
display: inline-block;
max-width: 150px;
vertical-align: bottom;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Kết hợp -webkit-line-clamp với overflow (Multiple Line Text Truncation)
Text Truncation khi nghe từ này thì chúng ta hiểu là những thuộc tính CSS nó sẽ cắt chữ sau đó và thêm dấu 3 chấm vào phía sau nha.
Với line-clamp chúng ta có thể chỉ định được số dòng tối đa muốn hiển thị, phần nội dung vượt quá sẽ bị ẩn đi và thay thế bởi dấu 3 chấm. Tuy nhiên, line-clamp chỉ hỗ trợ trong trình duyệt nhân webkit, bạn hãy cân nhắc trước khi sử dụng.
CSS.text-overflow {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
Sử dụng word-break
Ngoài ra, chúng ta cũng có thể sử dụng word-break để xuống dòng văn bản. Thuộc tính word-break này sẽ giúp cho chúng ta xử lý khi nội dung chữ bị tràn ra ngoài khi nó quá dài (ví dụ: Khi tester họ test, họ có thể nhập như thế này: okokokokokokokokokokokokokookokokok).
- word-break: break-all; - Để tránh bị tràn, nó sẽ ngắt dòng tại bất kỳ ký tự nào. Điều này có thể dẫn đến việc, 1 từ mà 1 nữa ở hàng trên, 1 nửa ở hàng dưới:
- word-break: break-word; - Để tránh bị tràn, nó sẽ ngắt dòng tại bất kỳ từ nào, cho nên nó sẽ đảm bảo việc một từ đầy đủ sẽ được hiển thị trên một hàng mà không bị như trường hợp break-all.
Hyphens
.element-class {
hyphens: auto;
}