Top 3 CSS Tricks

In this article, I am sharing top 3 simple and useful tricks in CSS.

1. Adding line break in between paragraphs

Break space between text

In some cases, you may need to add a line break in between a paragraph. So, instead of adding 2 paragraphs, we can simply line break in a single tag, as below.

<p>
  {
    "Feel free to contact us\nWe love to hear from you"
  }
</p>

CSS

& p {
  white-space: break-spaces;
}

2. Making header sticky

There are different scenarios when you need to make your header sticky.

<div className="header">
...
</div>

CSS

& .header: {
  position: sticky;
  top:0px;
  z-index: 1;
  min-height:60px; //optional
  width: 100%;
}

3. Adding ellipsis after n lines in paragraphs

This is also commonly used technique in CSS. In many cases, we need to trim long texts and display ellipsis (…) so that our design looks good and more readable.

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Currently, this looks like below:

Now, I will trim text to 2 lines and display ellipsis after that.

& p {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}