為什么Line Clamp無法使用text align justify

Question

為什么-webkit-line-clamp沒有使用text-align:justify顯示正確的省略號。 它與text-align:left/right一起正常工作。

請提出任何訣竅。

 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

您嘗試使用的解決方案是一種非常古老的技術。 它使用舊版本的display: flex; ，應該避免。

您可以使用JavaScript技術clamp.js，但我也創建了這個純CSS版本： http ：//codepen.io/n3ptun3/pen/meYKgZ？edit = 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;
}

當然，這僅適用於堅實的背景，但大部分時間都是正文的情況。

以下是要點：

1. 將行高設置為您喜歡的任何值。
2. 將高度設置為行高的倍數。
3. 將溢出設置為隱藏。
4. 將省略號添加到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

看看這個小提琴我不知道為什么在你的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>

希望這對你有用，或者幫助你解決問題。

Answer 4

我解決了：

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