Why Line Clamp doesn't work with text alignment

Question

Why -webkit-line-clampdoes not show the correct ellipsis c text-align:justify. It works great 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>

Run codeHide result

Answer 1

The solution you are trying to use is a very old technique. It uses the old version display: flex;and should be avoided.

You can use the JavaScript method, clamp.js, but I also created this clean version of CSS: http://codepen.io/n3ptun3/pen/meYKgZ?editors=110

CSS

p {
  position: relative;
  width: 400px;
  height: 120px;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: justify;
}

p::after {
  content: "...";
  background-color: #fff;
  height: 30px;
  width: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

Of course, this only works against a solid background, but most of the time it will take place with body text.

Here are the highlights:

• .
• .
• .
• after .

Answer 2

Webkit flexbox ! , . Opera , .

.last-line {
  height: 3.6em; /* exactly three lines */
  text-overflow: -o-ellipsis-lastline;
}

clamp.js , CSS, , : CSS: CSS

Answer 3

Fiddle , CSS , , .:)

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 works for you or helps solve the problem.