[Special Summer Sale] 40% OFF All Magento 2 Themes

Cart

how to add three dots to text when overflow in html?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10228
    jonathan-ivgi
    Participant

    How can I show three dots(…) in a text like this?
    like this?

    #10229
    rajesh
    Participant

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.