CSS word ellipsis ('...') after one or two lines

user_349072 0
Viewed 38874

I'm trying to create a word-wrap in JavaScript using CSS, and the condition is:

If DIV contains one very long word, such as "asdasfljashglajksgkjasghklajsghl", I want to display: 

     |asdasfljashglajk...|

If DIV contains a long sentence, such as "if i had a dime for everytime i was told i can't", I want to display: 

     |if i had a dime for|
     |everytime i was... |

I work with HTML, CSS, JavaScript. I can't use jQuery.

Please let me know if it's possible.

ellipsis css html javascript
9 Answers

Displaying the ellipsis needs to be handled differently when the width of container is fixed and percentage.

  • When width of container is fixed

    .nooverflow{
        display: inline-block;
        overflow: hidden;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

  • When width of container is in percentage or auto, in this scenario define another tag in that container to render the text and specify width as 0 and min-width as 100%, that way it will take the width of container and show the ellipsis. Below is the LESS class to be used:

    .nooverflow{
        display: inline-block;
        overflow: hidden!important;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap!important;
        width: 0;
        min-width: 100%;
    }

user_39265040
Related