Updating text-overflow property on resized element

Question

I am attempting to resize an element to be the same height as an adjacent element to keep a nice and clean flow in my web-page. I am using bootstrap's grid system.

Here is an example of the issue:

window.onload = function () {
    var left = document.getElementById('left');
    var right = document.getElementById('right');

    right.style.height = left.clientHeight + "px";
    alert("Set height to: " + right.clientHeight);
}

#left {
  border: 1px solid blue;
}

#right {
  border: 1px solid green;
}

.text {
  text-overflow: ellipses;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-8" id="left"> 
    <img src="http://placehold.it/1x1/" width="50%"> 
  </div>
  <div class="col-sm-4" id="right"> 
    <div class="text">
      a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text a lot of text 
      </div>
  </div>
</div>

As you can see, the green border stops way before the text stops, and the text-overflow property is not working anymore.

Nachshon Schwartz · Answer 1 · 2015-12-20T20:53:22.333

1

You must add overflow: hidden; to the wrapping element of the text.

#right {
     overflow: hidden;
}

This causes the ellipsis to kick in.

In addition, you misspelled ellipsis (not ellipses):

.text {
    text-overflow: ellipsis;
}

EDIT

It turns out it is impossible to add ellipsis not on the first line of text in css. CSS Tricks has some good workarounds https://css-tricks.com/line-clampin/

edited Dec 20 '15 at 20:53

answered Dec 20 '15 at 20:37

Nachshon Schwartz

15,289
20
59
98

Did you test this in a snippet? This does cut off the text, however does not apply the ellipsis. – Hobbyist Dec 20 '15 at 20:44
1

It turns out there is no way to currently do this with css http://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line – Nachshon Schwartz Dec 20 '15 at 20:50

Updating text-overflow property on resized element

1 Answers1