爲什麼Line Clamp不能與文本對齊對齊

爲什麼-webkit-line-clamp未顯示正確的省略號text-align:justify。它的工作正常與text-align:left/right。爲什麼Line Clamp不能與文本對齊對齊

請提出任何竅門。

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>

來源

2015-11-16 akash

看起來像一個錯誤。你在safari中看到了這個嗎？ –

不，我正在使用Chrome – akash

我會將此作爲錯誤提交。 –

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

您可以使用JavaScript技術，clamp.js，但我也創造了這個純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; 
}

當然，在一個堅實的背景這隻作品，但大多數情況下，身體文本就是這種情況。

以下是要點：

設置爲任何你喜歡的line-height。
將高度設置爲線高的倍數。
將溢出設置爲隱藏。
將省略號添加到after僞元素，並將其背景色設置爲段落背景色的背景色。

來源

2015-11-24 20:04:57 neptune

的Webkit Flexbox的是半生不熟的，不規範！我不會說這是一個錯誤。即使Opera有它自己的方式來處理夾緊，這是非常煩人的。

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

你可以使用clamp.js處理您的省略號，但如果你是一個像我這樣的純CSS解決方案的風扇 - 嘗試： CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS

來源

2015-11-19 13:26:53 Mibit

看看這個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>

希望這會爲你工作，或者幫你解決您的問題。

來源

2015-11-25 09:59:26

爲什麼Line Clamp不能與文本對齊對齊

回答

相關問題