Xin chào các bạn ! Tiếp tục với loạt bài thủ thuật hay xoay quanh CSS, hôm nay mình sẽ chia sẻ bài viết với chủ đề "Làm thế nào để xử lý được text-overflow".
Đây là vấn đề được các bạn QA rất hay sử dụng để test giao diện. Ví dụ họ thường có một format kiểu 1001 chữ
A dính liền nhau, nhập một đoạn văn bản cực dài cho tiêu đề hoặc bất cứ phần tử nào đó có thể hiển thị text. Và đương nhiên trong quá trình code Front-End (FE) nếu bạn không cover được các trường hợp thực tế có thể xảy ra đó chắc chắn QA sẽ log bug và tặng cho bạn 1 ticket nho nhỏ
Dưới đây mình sẽ liệt kê ra một vài rule CSS có thể áp dụng để giải quyết vấn đề trên
1. Sử dụng bộ ba
nguyên tử white-space, overflow, text-overflow
Bộ 3 này support hầu như tất cả trình duyệt nên ta có thể hoàn toàn yên tâm sử dụng
** Với Block-element
Đơn giản với các phần tử block bạn chỉ cần thêm các rule sau
text-overflow: clip; đoạn văn bản overflow sẽ bị ẩn đi,
text-overflow: ellipsis; phần bị ẩn đi sẽ được thay thế bằng dấu '3 chấm'
ngoài ra bạn còn có thể chỉ định chuỗi thay thế ví dụ text-overflow: "----"; tuy nhiên nó chỉ support cho Firefox
Và đương
nhiên với block-element bạn chỉ có thể quan sát được sự thay đổi khi nội dung container chứa nó không đủ (ví dụ như co cửa sổ trình duyệt xuống tối đa hoặc set width cho phần tử)
** Với Inline-block-element
Trong nhiều trường hợp bạn muốn cắt chuỗi nhưng chỉ muốn phần tử hiển thị ở dạng inline-block (ví dụ thẻ nếu để display: block khi hover ra ngoài text vẫn có cursor: pointer; nhìn rất không hợp lý) và để cắt chuỗi cho nó ngoài combo bộ 3 kể trên bạn cần phải thêm các thuộc tính sau
Đây là một thuộc tính mới rất hay nhưng rất tiếc chỉ support các trình duyệt nhân webkit, bạn có thể xem xét yêu cầu của người dùng để sử dụng cho hợp lý
3. Sử dụng word-break
Ngoài 2 cách ẩn nội dung tràn trên thì ta còn có thể sử dụng word-break để xuống dòng
văn bản. Trong đó hai giá trị hay sử dụng nhất gồm
word-break: break-all; - 'To prevent overflow, word may be broken at any character'
word-break: break-word; - 'To prevent overflow, word may be broken at arbitrary points'
Kết luận
Trên đây là một vài cách xử lý text-overflow với css thuần tuy rất nhỏ nhưng sẽ giúp bạn cover được rất nhiều khi bị QA test văn bản. Nếu bạn còn cách nào hay hơn đừng ngần ngại chia sẻ cho cộng đồng FE nhé.
Nếu thấy
bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn.
Xin cảm ơn và hẹn gặp lại ở các bài viết sau !
All rights reserved
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
Try it
Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was
implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.
The overflow-wrap property is specified as a single keyword chosen from the list of values below.
Values
normal
Lines may only break at normal word break points (such as a space between two words).
anywhere
To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break
points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.
break-word
The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating
min-content intrinsic sizes.
Formal definition
Formal syntax
overflow-wrap = normal | break-word | anywhere
Examples
Comparing overflow-wrap, word-break, and hyphens
This example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.
HTML
<p>
They say the fishing is excellent at Lake
<emclass="normal">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though
I've never been there myself. (<code>normalcode>)
p><p>
They say the fishing is excellent at Lake
<emclass="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamauggem>,
though I've never been there myself. (<code>overflow-wrap: anywherecode>)
p><p>
They say the fishing is excellent at Lake
<emclass="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamauggem>,
though I've never been there myself. (<code>overflow-wrap: break-wordcode>)
p><p>
They say the fishing is excellent at Lake
<emclass="word-break">Chargoggagoggmanchauggagoggchaubunagungamauggem>,
though I've never been there myself. (<code>word-breakcode>)
p><p>
They say the fishing is excellent at Lake
<emclass="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though
I've never been there myself. (<code>hyphenscode>, without
<code>langcode> attribute)
p><plang="en">
They say the fishing is excellent at Lake
<emclass="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though
I've never been there myself. (<code>hyphenscode>, English rules)
p><pclass="hyphens"lang="de">
They say the fishing is excellent at Lake
<emclass="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though
I've never been there myself. (<code>hyphenscode>, German rules)
p>