Posted in
1862
6:18 am, May 2, 2022
Truncate your Text with CSS
If you have some text in a set width element you can use the following property to truncate the text with an ellipsis (...).
You need is a fixed width element, and then some text that is wider than the element.
Text Overflow
text-overflow: ellipsis;
You also need to set a few more things for this overflow to work correctly.
White Space and Overflow
You need to tell the white-space to nowrap! and also the overflow needs to be hidden.
white-space: nowrap;
overflow: hidden;
Width of the element
The element needs a width that is less than the length of the text, otherwise it has nothing to overflow.
width: 180px;
Truncate your Text with CSS Demo
View Demo Full Screen View Demo New Tab
Truncate your Text with CSS Code
HTML
<div class='text-wrap'>
<div class='overflow-text'>Im a fixed width element with the property overflow: ellipsis</div>
</div>
CSS
.overflow-text {
width: 180px;
padding: 10px;
border-radius:5px;
background:rgba(255,255,255,0.4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Related Tags
Add Comment
Other Items in Text
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript