sinclobi.blogg.se - Css span text overflow ellipsis

This is a common example of long content. Now that you have an idea about the problem and its solutions, let’s explore some use cases and examples from around the web. We can solve this by simply adding a min-width to the button. How can we enhance this and make the button look better?

Let’s get back to the example that I showed you at the beginning of the article. I know that this might not be that common for you, but it’s an important thing to consider when designing and building a UI. This is a real-life example from Techcrunch website. The reason that this happened is that there is no gutter on the grid. We have a list of checkboxes, and one of them is very close to its sibling item. In some cases, you might forget to add padding until you notice a visual issue. The overflow-wrap property guides the browser into setting a break in case a word can’t fit its container. 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. By using some CSS techniques, we can at least reduce the issues of long or short content. 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.Īs you just read, it’s not about the long content. I’m not saying that this is a fatal problem, but it can make the button look weak or hard to be noticed. The button with the text “ok” is very small in width. Luckily, there are some CSS properties that were designed just for solving such problems.Īdding 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. 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.Īs a front-end developer, it’s important to decide on what should happen in such cases.

Should we wrap into multiple lines? If yes, what’s the maximum number of lines to wrap?.

In the example above, the name is wrapped into a second line as it becomes longer. Names length can vary, especially if you are working on a multilingual website. Let’s suppose that we have a vertical navigation. The problemīefore going into the techniques to handle text content, let me shed the light on the problem first. In this article, I will go through the different techniques that you can use right away to handle different text lengths in CSS. In my early days of learning CSS, I underestimated what adding or removing a word can do. 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. Having a clear idea of what to do when the text varies in length can prevent a lot of unwanted issues.

When you build a layout in CSS, it’s important to account for and test short and long text content.