You may have seen major websites with truncated text in the sidebar in order to keep things tight and neatly organized. If you wondered if they were using JavaScript or some other complex method to achieve this, the answer is no. While it may seem quite complex, it’s actually very simple to achieve by utilizing only CSS. In this tutorial we will teach you how to easily truncate text strings responsively while adding ellipsis at the end via CSS.

Step 1: Create an HTML Element for your Truncated Text

In Step 1, we will be creating an HTML element to place the text we want to truncate inside of. For purposes of this tutorial we will be using a span tag. Please note that you can use any HTML element you want for this method.

HTML

<span class="truncate">Lorem ipsum dolor sit amet, choro insolens conceptam vim cu</span>

Items to Note:

Take note of the CSS class ‘truncate’ added to the HTML element, it will be referenced in the next and final step.
Any HTML element can be used.

Step 2: Use CSS to Truncate your Text Responsively while also adding Ellipsis at the End

In the final step we will use CSS to make our span tag responsive while at the same time truncating the text with ellipsis at the end of it.

CSS

.truncate{
display: block;
max-width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Items to Note:

Make sure that you are referencing the same CSS class placed on your HTML element.
Max-width can be adjusted to any width necessary or removed if the element is already inside of another responsive element.
White-space set to ‘nowrap’ and overflow set to ‘hidden’ ensures that your text remains on one line.
Text-overflow set to ‘ellipsis’ will display the ellipsis at the end of your truncated text string.

Full Code

HTML

<span class="truncate">Lorem ipsum dolor sit amet, choro insolens conceptam vim cu</span>

CSS
.truncate{
display: block;
max-width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.