![]() Even if your button might need to accommodate words like “Wagenstandsanzeiger”, seeing “Wagenstan…” is not going to be clear to users. But once you change the viewport or resize the text, the end of the text disappears. However, I often see it used on items like buttons or even form labels to make them look nicer(?) or when aligning them vertically. To preserve more space for the title, you constrain the description to one line on small viewports to the one-line and you repeat the description on the detail page for this item. For example, you might have a table with titles and descriptions. There are a few legitimate use cases for this technique. That means that, to use this technique, you have to constrain the text to one line by using white-space: nowrap. In addition, text-overflow: ellipsis only works on one line text. But there is no way to make the hidden text visible. ![]() Text-overflow: ellipsis 1Īllows to at least have an indicator that text is missing. Using overflow: hidden makes sure that there is no overlapping text, but it cuts off the text abruptly. There could be with and height constraints for a block. The whole reason text-overflow exists is to specify the behavior of text once it flows over the container. I stumbled over some instances of text-overflow: ellipsis the other day and it broke resize and/or reflow. This post is basically a short addendum to my article about text resize and reflow.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |