Multiline text overflow ellipsis1/1/2023 ![]() ![]() White-space: nowrap makes sure if the width of you div is too narrow for the length of text. If your elements wrapping div does not have an explicit height you also need to add white-space: nowrap ,which you are best to use in most use cases anyhow. And while it's not a perfect solution for implementing a centered text-overflow: ellipsis technique, it's definitely good enough. Single lines you need to set the text-overflow property value to ellipsis. The more I use CSS Flexbox, the more I fall in love with it. I'll put together a demo for that later just in case anyone else is Googling for it, trying to understand wat?! For some reason, if a Flexbox container is inside of an LI, Safari removes the LI styling and also adds weird padding to the first Flexbox item. Though, I will say that Safari did freak out if the component was inside an LI element. But, that's the magic of CSS Flexbox! As I said before, Flexbox is amazing! I tested this on the desktop browsers for Chrome, Firefox, Safari, and IE11. And when we run this in the browser and resize the page, we get the following output: "I am the craziest project name that you have ever seen in your whole life - no one does this!"Īs you can see, each one of the "project names" is being rendered using the custom component. "This is my long long long long project name", "I am also quite long in my own right, not to be outdone", "This is a really long project name over here", In addition, the dynamic height can also be achieved with a negative margin (performance will be slightly better than calc). Change the number of lines of the text, which is also located in the lower right corner~ In this way, the calculated height just now takes effect. text In practice, display: grid and display: -webkit-box are equally effective, with similar principles Let’s take a look at multi-line text truncation, this one is relatively simple Put the button in the lower right corner and mix instead of a single line, which may be more visually comfortable and beautiful. The "Expand and Collapse" button at the bottom right corner That how text looks when there are no constraints. Text could be single line like Title, Subtitle and multiline as description. But sometime we have fixed layout and the content is user generated. ![]() By default things are handled well by browsers. MULTILINE TEXT OVERFLOW ELLIPSIS HOW TOTo be honest, before looking at this layout alone, even with the help of JavaScript is not an easy task (you need to calculate the width of the text to dynamically intercept the text, vue-clamp this), let alone the following interaction and judgment logic, But after my pondering, in fact, pure CSS can also be achieved perfectly, let's take a step by step to see how to achieve it~ 1. Today I wanted to show you different techniques to handle long form text.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |