how to add three dots to text when overflow in html? [duplicate]

Add all these.
To make in single line.

{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width:100px; /* some width */
}

To do in multi line which actually you asked.

#content {
    overflow: hidden;
    width:100px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

working fiddle:
https://jsfiddle.net/mishrarajesh/676jc7sa/

Please note that this multiline code is supported only in web-kit browsers for now.

Leave a Comment