如何使橢圓垂直對齊？

Question

我有幾行文字，每一行都用省略號截斷。

 .container { display: block; border: 1px solid; width: 200px; }.text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 20px; text-align: justify; }

 <div class="container"> <p class="text"> This is text1 that has very very very long string. </p> <p class="text"> The ellipses of the line is not vertically aligened with the above one. </p> <p class="text"> This is text3 that has very very very long string. </p> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div>

正如您從演示中看到的那樣，即使元素寬度都相同，所有橢圓也不會垂直對齊。
如何使它們全部垂直對齊？

PS截圖附上

Answer 1

text-align 屬性僅在子元素的長度小於父元素（或包含元素）的寬度的情況下使用。 如果子元素的長度比其父元素/包含元素寬，則不使用 text-align 屬性。 我知道您嘗試使用 text-align: justify 做什么，但在這種情況下它不起作用，因為段落元素的長度實際上超出了您為容器元素設置的 200px。

因此，為了垂直對齊它們，您只需要設置一個寬度並將其添加到.text class。

將width: 180px添加到 your.text class 應該可以為段落元素設置寬度，這將使其更接近。

但是，您仍然會遇到奇怪的實例，它們在不同的字符處被截斷，並且它們不會完全按照您的預期對齊，因此您可以執行以下操作，這有點棘手，因為您必須添加一個包裝器每個段落元素。 它可能看起來有點糟糕，但這就是你的做法：

 .container { display: block; border: 1px solid; width: 200px; }.text{ text-overflow: clip; font-size: 20px; height: 20px; width: 170px; overflow: hidden; word-break: break-all; }.ellipsis{ position: relative; }.ellipsis::after { content: "..."; position: absolute; left: 170px; top:0; font-size: 20px; }.ellipsis:first-of-type::after { top: 20px; }

 <div class="container"> <span class="ellipsis"><p class="text"> This is text1 that has very very very long string. </p></span> <span class="ellipsis"><p class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p></span> <span class="ellipsis"><p class="text"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></span> <span class="ellipsis"><p class="text"> This is text1 that has very very very long string. </p></span> </div>

不過，由您決定使用哪些:)

Answer 2

我認為 css 技巧是可能的。

 .container { border: 1px solid; width: 200px; }.text { position: relative; overflow: hidden; font-size: 20px; height: 1.5em; padding-right: 1em; text-align: justify; word-break: break-all; }.text::after { content: '...'; position: absolute; right: 0; top: 0; z-index: 1; width: 1em; text-align: center; background: white; }

 <div class="container"> <p class="text"> <span>This is text1 that has very very very long string.</span> </p> <p class="text"> <span>The ellipses of the line is not vertically aligened with the above one.</span> </p> <p class="text"> <span>This is text3 that has very very very long string.</span> </p> <p class="text"> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span> </p> </div>

但是使用這種方法，如果 'text' 小於 'container' 它看起來很奇怪，所以將'::after' 應用於特定的 class。

例如，'.overflow::after' 並通過 JavaScript 當 'text' 大於 'container' 時應用 'overflow' class。

 window.onload = function() { var tmpContainer = document.getElementsByClassName('container'); var tmpContainerWidth = tmpContainer[0].clientWidth; var tmpText = document.getElementsByClassName('text'); var tmpTextLen = tmpText.length; for (var i = 0; i < tmpTextLen; i++) { var tmpTextWidth = tmpText[i].children[0].offsetWidth; var tmpTextFontSize = parseFloat(getComputedStyle(tmpText[i]).fontSize); if (tmpTextWidth + tmpTextFontSize >= tmpContainerWidth) tmpText[i].classList.add('overflow'); } }

 .container { border: 1px solid; width: 500px; }.text { position: relative; overflow: hidden; font-size: 20px; height: 1.5em; padding-right: 1em; text-align: justify; word-break: break-all; }.overflow::after { content: '...'; position: absolute; right: 0; top: 0; z-index: 1; width: 1em; text-align: center; background: white; }

 <div class="container"> <p class="text"> <span>This is text1 that has very very very long string.</span> </p> <p class="text"> <span>The ellipses of the line is not vertically aligened with the above one.</span> </p> <p class="text"> <span>This is text3 that has very very very long string.</span> </p> <p class="text"> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span> </p> </div>