如何使椭圆垂直对齐？

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>