How to insert more than one line ellipsis dot(…) using “line-clamp” in css3

If you need to truncate text after one line, then the text-overflow: ellipsis; is a great option - or any of the other text-overflow values. If you need to truncate text after more than one line, however, things get hairy. -webkit-line-clamp aims to resolve this, but there are several caveats. Here are some things to consider, starting with the bad news first.

ellipsis use for one line dot… but “line-clamp” use more than one line dot…

p {
    height: 53px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: inherit;
    padding: 5px 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also fauc…