Ellipsis on second line using pure css

Guys while working to get ellipsis on second line in my project, I realized we can do this using just CSS!!

PROS:
The solution supports IE9+ and ofcourse all modern browsers.

CONS:
– Looks misplaced for long words.

<div class="ellipsis">
    <span>...</span>
    Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.
</div>
div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Explanation:

Below are the points to remember:

  • If you want the ellipsis on second line then make sure that the height you have given is the multiple of line-height and number 2(second line, the number will be 3 to get the ellipsis on third line.)
  • Look how I z-indexed the span’s three dots and the after pseudo element’s dots. which plays the main role in getting this ellipsis like structure.
  • Make sure the dots in content property fits the container if there is no text.
  • Make sure the background-color and color css properties of the pseudo element of content has the same color as the background color of the content element.
  • The space between each dot (.) makes sure that the ellipsis will be seen when the content is overflown out of the container or if the content is very near to get overflown (drawback).
  • Also make sure the box-shadow color of the pseudo element is similar to the background color of the content element.

NOTE: If you use word-break: break-all; on the content element then there will be no drawbacks except the words will break. if it is ok for your project then this solution is perfect.

I hope you understood my explanation. If not then please feel free to leave a comment below. Happy coding :)

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s