In day-to-day work life for a frontend developer, one comes across scenarios where you get to use the same styling in order to style a particular element. In this article, here are the first 5 of the CSS tricks I regularly use in my day-to-day work:

1. Limiting text display with an ellipsis:

There are a lot of cases I come across where an element has a fixed width but its text content overflows and then overlaps the other adjacent elements, so here is a generic style class that I use on the element to prevent the text from overflowing.

CSS trick for handling overflowing text with an ellipsis

In order to make the above styling work, the element needs to have a fixed width. I usually use separate style classes to apply width in order to keep the style classes as generic as possible.

2. Making an element center-aligned inside a block (horizontally & vertically)

The easiest way to center-align text, an image, or any other element within a block is by using just a couple of flexbox properties. The style class needs to be applied to the block element and the content inside it will automatically be centrally aligned.

CSS trick for center align content inside a block element

Please note that the element which uses this class needs to have some height (or min-height) and only then it can be seen that the inside content aligns itself vertically in the middle of the block.

3. Break text in a new line

During the testing phase of the UI, sometimes the layout needs to be tested with longer text which has no spaces and is full of special characters, which might not be a realistic scenario but the UI should still be able to handle it smoothly.

#ui #web-development #css #useful-tips #tricks