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

Answer 1

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>

Answer 2

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>