Why Line Clamp is not working with text align justify

Question

Why -webkit-line-clamp is not showing proper ellipsis with text-align:justify. It's working fine with text-align:left/right.

Please suggest any trick.

div {
    text-align: justify;
    width:150px;
    padding: 0 5px;
    line-height: 18px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div>Why Line Clamp is not working with text align justify</div>

Answer 1

I solved with:

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

Answer 2

Check out this Fiddle I don't know why in your CSS it is not working, have changed some and did some Experiments, working for me. :)

CSS:

.line-clamp {
    text-align: justify;
    width : 155px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML

<div class="line-clamp">Why Line Clamp is not working with text align justify</div>

Hope this will Work for you, or Help you to Solve your Issue.