#MULTILINE TEXT OVERFLOW ELLIPSIS CODE#

If you want to share your thoughts or ask a question, give it a shot in the comments section. In this post, we saw how CSS ellipsis can help us create clean and symetric layouts without altering the content that has to be shown. We adjust the display by using -webkit-line-clamp and we add the same properties that we already used in the previous example: overflow, max-width and text-overflow. Like we explained earlier, we use SCSS to compute the height by multiplying our variables. Height: $font-size*$line-height*$lines-to-show Then, since it's multiline ellipsis, we won't be able to display the three ending dots, unless we use the -webkit-line-clamp prefixed property, wich makes cross browser support a bit shaky. To achieve our goal, we are going to compute the text height dynamically by doing the following math:įont size x Line height x Lines to show = Text height Hopefully, SCSS supports variables and we are going to take advantage of them. įirst, we are going to need 3 variables : Nam, ut sint illa vendibiliora, haec uberiora certe sunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. We are going to apply that on the p element wich holds the post abstract. The one that we are going to see right now is strongly reliable, but requires to define text dimensions to work properly. I've seen numerous attempts to do it and each one has its strengths and its weaknesses. Therefore, we will have to rely on some kind of hack (some might not see it like that, but i knda do). Unfortunately, there is nothing built in at the moment to support multiline ellipsis.

overflow: hidden and text-overflow: ellipsis finish the job by hiding the rest of the text and displaying the suspension dots.

Specifying a max width sets a boundary for the text and the white space property prevents it to wrap in a second row. Let's set these properties to create our ellipsis effect: In our case, we are using text-overflow: ellipsis. Well it's not a big deal, white-space determines the way the white space is handled in the element whereas text-overflow determines the effect used to truncate the text. While you might probably know the first two ones, there a chance that you've never seen the other ones, that, i admit it, can be quite obscure for a beginner. To setup our ellipsis, we will need to set several properties: This is a very very long blog post title that spans on two rows

#MULTILINE TEXT OVERFLOW ELLIPSIS CODE#

Let's directly dive in.Įach post title is represented by the following html code : You have to setup a few CSS properties to achieve the desired effect. Making a single line ellipsis is quite straight forward and easy. We will use ellipsis in two different manners to achieve single line ellipsis on the title and multiline ellipsis on the abstract. To learn more about how we can use it, we will take a simple example : a row of 3 blog post cards with different content sizes. You will probably need to use ellipsis when you will be building a UI that requires everything to keep the same size, whatever the amount of content it has to hold. In other words, CSS ellipsis is a tool that you can use to truncate a given piece of text. Css ellipsis behaves the same way as when you are enumerating things and ending prematurely your enumeration using the 'etc.' particle.

Multiline text overflow ellipsis