Truncating text and adding an ellipsis in CSS

Question

I'm attempting to truncate a paragraph of text and adding an ellipsis after to indicate there is more content.

I attempted to use the CSS property text-overflow:ellipsis - however looking at examples of this it seems it is only possible with the use of no-wrap and thus it can only be used on single lines of text, so not appropriate for truncating a paragraph.

I then came up with another soltuion, which is almost correct but has just one problem...

So instead of truncating using the ellipsis property, I truncated the old fashioned way by using overflow:hidden and setting a max-height

.tourItem .tourInfo
{
max-height: 110px;
overflow: hidden;
display: block;
}

And then to create the neat ellipsis I used :after

.tourItem .tourInfo:after {content:'...';}

This seems like the right way however I have run into two problems...

1. The overflow:hidden means that the :after content doesn't show. But it's required as it is what controls the truncated text!
2. The ellipsis (if you take off the overflow:hidden) is shown underneath the section of text. I need it to seem like it is part of the line of text...

JS Fiddle to help

Selfdiscipline

If your happy to go down the plugin route, i'd recommend checking out the jQuery dodotdot plugin which can help with this. – Lampblack

Answer 1

Check out JSFiddle Link, where ellipsis is added to the paragraph using CSS only. You can customize the background according to the requirements/needs.

Here's the code:

.tourItem {
  position: relative;
  font-family: sans-serif;
  display: block;
  width: 244px;
  height: 7em;
  overflow: hidden;
}

.tourItem .tourInfo {
  color: #333;
  padding: 20px;
  width: 204px;
  overflow: hidden;
  background: #E0E0E0;
  font-size: .95em;
  line-height: 1;
  text-align: justify;
}

.tourItem .tourInfo:after {
  content: ' ';
  position: absolute;
  display: block;
  width: 100%;
  height: 1em;
  bottom: 0px;
  left: 0px;
  background: #E0E0E0;
}

.tourItem .tourInfo:before {
  content: '...';
  text-align: right;
  position: absolute;
  display: block;
  width: 2em;
  height: 1em;
  bottom: 1em;
  right: 20px;
  background: -moz-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(224, 224, 224, 0)), color-stop(38%, rgba(224, 224, 224, 1)), color-stop(99%, rgba(224, 224, 224, 1)));
  background: -webkit-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: -o-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: -ms-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: linear-gradient(to right, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e0e0', endColorstr='#e0e0e0', GradientType=1);
}

<div class="tourItem ">
  <div class="tourInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Wares

Answer 2

you can use -webkit-line-clamp, which is a webkit/blink brower private property

.ellipsis1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

<div class='ellipsis1'>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

and if you want to custom ellipsis text, use this pure css method:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Raimes

Answer 3

Have you try to make something like this?

<div class="content-ovh">
   <p class="text">Your text</p>
   <a href="#">More</a>
</div>

And the style:

.content-ovh .text{
    witdh: yoursize px;
    height: yoursize px;
    overflow:hidden;
}

Thunderpeal

This doesn't work as per the content I have. I need an ellipsis, not a read more button. – Selfdiscipline

Ok sorry, and using your second option if you assign to the <p> element the property "display:inline;" it will work. (Just try on your codepen) – Thunderpeal

Answer 4

I swapped some styles around and it works like this! I moved the max-height and overflow to the <p> tag instead of the div. This way the div automaticly takes the correct height of the paragraph and now you can use the :after on the div, and hide the :after on hover. Next to this I also positioned the "dots" to the right position.

CSS

.tourInfo {
    width:150px;
    display: block;
}

.tourInfo:after { /* position the dots */
     position:relative;
     background-color:white;
     left:138px;
     top:-16px;
    content:'...';
}
.tourInfo p{
    color:#666;
    font-size:13px;
    font-weight:normal;
    display:block;
    margin:0;
    overflow:hidden; /* overflow hidden on the <p> instead of the div */
    max-height: 110px;
}

.tourInfo:hover:after {
    display:none; /* hide after on hover */
}

.tourInfo:hover p {
    max-height:100%; /* change max-height on hover */
}

FIDDLE

http://jsfiddle.net/jPM4R/3/

Hope this helps you out!

Chapatti

Answer 5

I think you would need to wrap tourInfo. This way you can give tourInfo a percentage width to allow room for the ellipsis.

HTML

<div class="bacon">
    <span class="tourInfo">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </span>
</div>

CSS

.bacon{
    width: 150px;
    position: relative;
}

.tourInfo{
    height: 110px;
    width: 85%;
    display: block;
    overflow: hidden;
}

.tourInfo:after{
    content: '...';
    position: absolute;
    bottom: -3px;
    right: 18px;
}

This could probably be refined a bit but you get the idea.

Ammonia

Answer 6

I've just made a jquery plugin for truncating a text inside a HTML container :

https://github.com/AlirezaAsadi/truncatie

Truncatie is a jquery plugin that limit size of text by lines within a html container

usagex

  $('big-text').truncatie({
       elipsis: '...',
       max: 2 /* Number of lines limitation */
   });

# Input

 Truncatie is a jquery plugin
 that limit size of text by 
 lines within a html container

# Outeput

 Truncatie is a jquery plugin
 that limit size of text by..

Husha

Some sample code would be nice to explain the solution rather than just a link to a package as links can change or be removed. – Vaporing