How to make ellipses vertically aligned?

user_11728457 0
Viewed 93

I have several lines of text, each of them is truncated with ellipses.

.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>

As you can see from the demo, all the ellipses are not aligned vertically even though the element width is all the same.
How can I make all of them to be aligned vertically?

P.S. Screenshot attached
enter image description here

ellipsis css dom html javascript
2 Answers

The text-align property is only used in cases where the length of the child element is less than the width of the parent (or containing element). If the length of the child element is wider than its parent / containing element then the text-align property isn't used. I get what you are trying to do with text-align: justify, but it doesn't work in this case as the paragraph elements lengths are actually extending past the 200px that you set for the container element.

So, in order to vertically align them, you just need to set a width and add it to the .text class.

Adding width: 180px to your .text class should do the trick to set a width for the paragraph elements which will get it much closer.

However you'll still have the odd instance where they cut off at different characters and they won't align exactly as you expect, so you can do the below, which is a bit more tricky as you'll have to add a wrapper to each of the paragraph elements. It can potentially look a bit naff, but this would be how you do it:

.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>

Up to you which of those you use though :)

user_25744610

I think it's possible with css tricks.

.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>

But with this method, if 'text' is smaller than 'container' it looks weird, so apply'::after' to a specific class.

For example,'.overflow::after' and apply the 'overflow' class when 'text' is larger than 'container' via JavaScript.

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>

user_132661430
Related