say, on your sidebar you want to show a title, and then a number of views. Considering that the title will be too long to show all of it in the sidebar, you can use css’ text-overlay feature to cut the title off at a certain distance and put ‘…’ at the end.

to do this:

<div class="stream-block">
  <div class="title">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, eius!
  </div>
  <div class="views">20201</div>
</div>


so again, the title element has too much text to be shown on, say, a sidebar. we need to give the .title element the following css:

.stream-block .title {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

it needs a specified width, white-space makes it so once the text reaches the end of the line, it wont wrap to the next one, overflow needs to be set to something other than ‘visible’, and the text overflow: ellipsis makes it so once its at the end of the line, it will add …