I use grammarly.com to correct the articles from this blog given that English's not my primary language. In this app, if you set a longer title a document you will get the ellipsis sign after a specific length.
This can be done quite easily in CSS thanks to the declaration text-overflow: ellipsis;
.
Hoever keep in mind that for this to work you will also need to:
- set a clear width to the text so that there is a limit for how much the text can expand
- and also a nowrap alongside
overflow: hidden
so that the text will stay on one line and will not go outside the container
The full declaration for a truncation class may look like this:
.truncate-to-300 {
text-overflow: ellipsis;
width: 300px;
white-space: nowrap;
overflow: hidden;
}
And to get the output from the picture we can just to:
<h1 class="truncate-to-300">A CSS tricky situation- the order of the CSS class names in the HTML tags</h1>
There are also techniques that allow to add ellipsis (the 3 dots) on multiple lines in CSS.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.