Styling Text

The best choice for vertically aligning a text in a div is to use the display: flex property on the parent div. Doing that, you can then use the align-items: center attribute to the same element. That way everything inside that div will come to center on the vertical axis. 

You can also use the justify-content: center attribute in order to align the div on the horizontal axis. Keep in mind that justify-content: center is not equivalent  to text-align: center. The first aligns the hole div when the second aligns the text inside it.

When we use CSS columns: n on a ul or ol element sometimes we need to prevent splitting an element between two columns.

For example we want the second title below to be above it's items on the second column

After applying the break-inside: avoid-column CSS rule the result will be like this:

CSS attribute: break-inside
Available values: auto | avoid | avoid-page | avoid-column | avoid-region
Initial: auto

When combined with the display attribute, the line-champ CSS property (first check browser compatibility: https://caniuse.com/?search=line-clamp) will confine text to a specified number of lines: -webkit-box or -webkit-inline-box. It will end with an ellipsis when text-overflow: ellipsis is included. The -webkit-box-orient property must be set to vertical.

Note: Don't forget to add max-height and overflow: hidden to your div so that the rest of the text (after the ellipsis) doesn't show up.

Can accept either a number specifying the visible columns or none.