![]() ![]() 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 our example below, besides the display property, we set the text-overflow to 'ellipsis', use the 'nowrap' value of the white-space property, set the overflow to 'hidden'. In some cases, you might forget to add padding until you notice a visual issue. To make an ellipsis work on a table cell, you can use the CSS display property set to its 'block' or 'inline-block' value. 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. You can use the text-overflow property to provide a visual clue to the user that there is more content, by displaying for example, an ellipsis character (U+. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |