For a single-line web label, give the element a constrained width and combine overflow: hidden, white-space: nowrap, and text-overflow: ellipsis. In Tailwind CSS, use truncate and make sure the layout actually limits the element’s width. For Python text that should stop at a word boundary, use textwrap.shorten.
Truncate a single line with CSS
The text-overflow property signals that inline content is hidden; it does not create overflow on its own. The element needs a width or other layout constraint, hidden overflow, and no wrapping. MDN’s text-overflow reference documents the property and its requirements.
.label {
width: 18rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}When text no longer fits, ellipsis displays an ellipsis (U+2026) at the line’s end edge, taking up some of the space that would otherwise show text. A custom string can also be used where supported. The exact clipped side and ellipsis position follow the text’s direction and writing mode, so check the result in right-to-left layouts. The W3C CSS Overflow specification defines this behavior.
Why text-overflow: ellipsis may not work
First check whether the element can actually become narrower than its content. Set a width or max-width, or ensure the surrounding grid or flex layout constrains it. Then confirm that overflow is hidden and the text is kept on one line. If any of those conditions is missing, there may be no inline overflow for the ellipsis to signal.
Recommended Free Tools
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Use Tailwind CSS
Tailwind’s truncate utility applies the three core declarations together:
<p class="truncate">A long label that will end with an ellipsis…</p>The utility sets overflow: hidden, text-overflow: ellipsis, and white-space: nowrap. It still needs a layout limit, such as a width or max-width, to make the text overflow. Use text-ellipsis when you only need to set the text-overflow property, or text-clip to clip without an ellipsis. See Tailwind CSS’s text-overflow utility documentation.
Shorten a string at a word boundary in Python
For a text value you need to shorten before display or storage, Python’s textwrap.shorten removes whole words from the end until the text and placeholder fit within the specified width:
from textwrap import shorten
short = shorten(
"A long string that should fit in a compact UI label",
width=24,
placeholder="...",
)The width here is a text-width count, not a measurement of rendered pixels. The function first collapses runs of whitespace to single spaces, then removes words as needed to fit the result and placeholder. It does not account for font, available screen space, or glyph shaping. See the Python textwrap.shorten documentation.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Choose the right approach
| Approach | What determines the cutoff | What it preserves |
|---|---|---|
CSS text-overflow |
Rendered inline overflow in the constrained layout | Can clip part of the final visible line |
Python textwrap.shorten |
Numeric text width after whitespace normalization | Whole words, plus the placeholder if it fits |
Use CSS when the cutoff should respond to the element’s actual rendered size. Use Python when you want a word-oriented string result independent of browser layout.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Multiline text, direction, and access
For multiple lines
Basic text-overflow handles inline overflow at a line edge; it is not a general multi-line truncation method. A multi-line design needs a separate clamping or layout strategy.
For right-to-left text
CSS positions the ellipsis according to inline progression and writing mode. Verify the clipped side and visible marker in the actual language and layout rather than assuming it will appear at the visual right edge.
For users who need the full value
Make the complete text available through an expanded view or another suitable interaction, and do not treat the visible ellipsis as a replacement for the underlying value. When users interact with or scroll overflowing content, browsers may adjust the ellipsis behavior. Editable inputs, textareas, and contenteditable elements can also behave differently: MDN notes that they generally show clipping rather than an ellipsis while focused, so text remains editable.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchBest Value
For a label that must remain readable in every context, consider allowing it to wrap or providing a way to reveal the full value rather than relying on truncation alone.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
