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>

I'm voting to close this question as off-topic because it is asking why a certain browser may have an implementation bug that really should be a bug report. — Daniel A. White, Nov 16 '15 at 14:14
What are you seeing that should or should not be happening? Define "not working". — j08691, Nov 16 '15 at 14:17
I inspected the element with google chrome and changed its ' -webkit-box-orient: vertical;' to something else. It solved the issue. However, if you do it with JS it does not work. — Arashsoft, Nov 18 '15 at 21:35
Should `-webkit-line-clamp` be too buggy for reliable use, here are some alternative methods for applying ellipsis: http://stackoverflow.com/a/33061059/3597276 — Michael Benjamin, Nov 19 '15 at 00:49

score 4 · Answer 1 · answered Oct 26 '18 at 14:52

4

I solved with:

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

answered Oct 26 '18 at 14:52

Alessio Campanelli

970
11
19

Solve by this, cause autoprefixer removed this css when enabled – zhangciwu Nov 28 '19 at 06:14

score 3 · Answer 2 · answered Nov 19 '15 at 13:26

Webkit flexbox is half-baked and not standardized! I wouldn't say that this is a bug. Even Opera has it's own way to handle clamping, which is super annoying.

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

You could use clamp.js to handle your ellipsis but if you're a fan of pure CSS solutions like me - try that: CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS

score 3 · Answer 3 · answered Nov 25 '15 at 09:59

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.

neptune · Accepted Answer · 2015-11-25T23:43:31.387

The solution you're trying to use is a very old technique. It uses an old version of display: flex;, and should be avoided.

You can use the JavaScript technique, clamp.js, but I've also created this pure CSS version: 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 on a solid background, but most of the time that'll be the case with body text.

Here are the main points:

Set the line-height to whatever you like.
Set the height to a multiple of the line-height.
Set the overflow to hidden.
Add the ellipsis to the after pseudo-element and set its background color to that of the paragraph's background color.

Why Line Clamp is not working with text align justify

4 Answers4

Linked