CSS Truncate text

Truncate text without expanding element width using the text-overflow: ellipsis; property.

by David McClelland

HTML

<div class="uberContainer">
  <div class="container">
    <p>Some long text goes here</p>
  </div>

  <div class="container">
    <p class="ellipsis">Some long text goes here</p><img src="http://www.gravatar.com/avatar/bdf6ed57838ccff4cdb71ba1e127e00d/?default=&s=80" />
  </div>
</div>

CSS

.container {
  background: #ddd;
  padding: 10px;
  margin: 20px auto;
 /* width: 100px; */
   float: left;
  width: 33.33%;
  padding: 5px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uberContainer {
  float: left;
  width: 400px;
  border: medium dashed green;
  box-sizing: border-box;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}