https://ishadeed.com/article/css-short-long-content/
When you build a layout in CSS, it’s important to account for and test short and long text content. Having a clear idea of what to do when the text varies in length can prevent a lot of unwanted issues.
There are many situations where adding or removing one word can change how a design looks, or even worse, it can break it and make it inaccessible. In my early days of learning CSS, I underestimated what adding or removing a word can do. In this article, I will go through the different techniques that you can use right away to handle different text lengths in CSS.
Before going into the techniques to handle text content, let me shed the light on the problem first. Let’s suppose that we have a vertical navigation.
Names length can vary, especially if you are working on a multilingual website. In the example above, the name is wrapped into a second line as it becomes longer. Here are some questions:
That’s the case with more words than expected, but what happens when a word is too long? By default, it will overflow its container.
As a front-end developer, it’s important to decide on what should happen in such cases. Luckily, there are some CSS properties that were designed just for solving such problems.
Adding on that, the problem is not only about long content, but also short content can break a UI, or make it look weird, at least. See the example below:
The button with the text “ok” is very small in width. I’m not saying that this is a fatal problem, but it can make the button look weak or hard to be noticed.
What we should do in such a case? Maybe set a min-width on the button? That can provide a safe width regardless of the content length.
As you just read, it’s not about the long content. Also, short content can cause problems. By using some CSS techniques, we can at least reduce the issues of long or short content.
Now that you have an idea about the problems, let’s dig into the CSS techniques that provide a solution for dealing with long content.