Handling text that is too long or too short with CSS

Tram Ho

In the process of code interface, there is a common case that we often see the text is too long, or too short. Sometimes, if we do not handle it well, just adding 1 word is enough to break the layout. In this article, I will guide you through the techniques for dealing with such paragraphs.

Let’s start with an example for easy understanding, let’s say we have a navigation bar like this

Name lengths can vary, especially when you’re working with a multilingual website. In the example above, the name has been converted to 2 lines as it gets longer. Here are some questions:

  • Should we cut the text short?
  • Should we put it in multiple lines? If yes, how many lines at maximum are appropriate?

There is a worse case, when a word is too long, it will overflow its frame

Fortunately, in this case, the CSS has properties that were generated just to solve this problem. Plus, not only with long, short content can also break the look, or at least make it look bad, like the following example.

The button with the ” Ok ‘text is very small.It’s not a big deal, it just makes the button look ugly, not eye-catching.So what should I do, should I set a min-width for this button ? It will ensure a safe width, regardless of the content.

In general, whether too short or too long, anything too causes the problem, and it’s our job to solve it.

Long content

Here are ways to deal with long content

Overflow wrap

The overflow-wrap used to set line breaks if a word goes beyond its enclosures

Hyphens

This is an attribute that adds a hyphen to concatenate a long, line-breaking word in a paragraph. This is an example

However, because it is automatic, it will break any redundancy, even if it is just a short word that can move on to the next line.

Text truncate

This is probably quite familiar to everyone, it will help cut redundant content, replace it with an accent … this content expression is actually longer.

In CSS is not available a truncate property, but we will combine CSS properties

Truncate multiple lines

This is a more upgraded version of the one above, explaining is a bit difficult, everyone who sees the photo immediately understands

To use this, it is imperative to add display: -webkit-box , the -webkit-line-clamp determines the maximum number of lines to be displayed. However, this approach has one disadvantage: it is not possible to use padding , it will result in displaying part of the next line like this.

Scroll

Sometimes, line breaks or hyphen are not appropriate, for example when displaying a piece of code, it will be difficult to read a line break. In this case, horizontal scrolling will provide a better experience.

Short content

This may not be very common to you, but it’s a pretty important one when it comes to UI design and construction.

Set minimum width

We will go back to the header example, simply adding the min-width , we won’t need to worry about the button being too small anymore.

Now that we know the problem and the solution, we will go into some more common cases.

Common cases and how to handle them

Profile card

This is a fairly common example, it is difficult to predict the length of a name. So how?

We can truncate the display name to 1 line, or display 2 lines and then truncate.

Navigation items

When making a multilingual website, the text length can vary, for example as follows

The About word in the English version looks louder. In the RTL version, this text is quite small, making it difficult for users to click on it. In this case, it is best to set the minimum width for the items in the navigation

content

In a long paragraph, having a few long words or links is quite common.

In the picture above, a word that is too long to be out of frame causes horizontal scrolling. As just shown above, you can handle it simply with text-overflow or hyphens .

Cart

The product name can be just 1 word or more lines, in the example below, the product name is long leading to too close to the delete button.

In this case we can add margin or padding between the name and the delete button

Or you can add a max-width for the name, then handle the extra text (newline or hide it).

Flexbox and long content

There are a few cases where using flexbox with long content can also cause layout rupture, as in the following example

However, when the text is too long, it will overflow like this

The reason is because the flex-item will not shrink below its minimum content, to process this we will add min-width: 0 to the flex-item

More specifically, you can read more this article .

Reference source: https://ishadeed.com/article/css-short-long-content/

Share the news now

Source : Viblo