CSS.md

Awesome CSS Tips

Contents

• Cursors
• Smooth Scrolling
• Truncate Text
• Truncate Text To The Specific Number Of Lines

Cursors

Did you know that you can use your own image, or even emoji as a cursor?

div {
    cursor: url('path-to-image.png'), url('path-to-fallback-image.png'), auto;
}

Link to Codepen

Smooth Scroll

Smooth scrolling without #javascript, with just one line of CSS.

html {
    scroll-behavior: smooth;
}

Link to Codepen

Truncate Text

Did you know that you can truncate text with plain CSS?

.overflow-truncate {
    text-overflow: ellipsis;
}

Link to Codepen

Truncate Text To The Specific Number Of Lines

You can use -webkit-line-clamp property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped.

.overflow-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

Link to Codepen