Truncate text with CSS ellipsis

Truncate long text with text-overflow:ellipsis

by Christopher O

HTML

<!-- long text -->
<div class="div1">
  <span>Soundsoflaughterherecomessunshinesmilingfacesallaround</span>
</div>

<!-- long text -->
<div class="div1">
    <span>Sounds of laughter, here comes sunshine, smiling faces all around.</span>
</div>

<!-- short text -->
<div class="div1">
    <span>Short Text</span>
</div>

<!-- floating blocks + long text -->
<div class="div1">
  <div class="block"></div>
  <div class="block2"></div> <!-- hides -->
    <span>ThisIsMyReallyReallyLongText</span><br>
    <span>Sounds of laughter, here comes sunshine, smiling faces all around.</span>
</div>


<!-- floating blocks + long text -->
<div class="div2">
  <div class="block"></div>
  <div class="block2"></div> <!-- shows because of spanWrapDiv -->
  <div class="spanWrapDiv"><span>ThisIsMyReallyReallyLongText</span></div>
  <div class="spanWrapDiv"><span>Sounds of laughter, here comes sunshine, smiling faces all around.</span></div>
</div>

CSS

.div1 {
    margin:10px;
    width:250px;
    /* max-width:200px; */
    font-size: 1.2em;
    border:1px solid blue;
    
    /* required for ellipsis */
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
span{
  background-color:yellow;
}
span:hover {
    background-color:teal;
    cursor:pointer;
}

.block{
  width:50px;
  height:50px;
  float:left;
  margin: 5px;
  background-color:orange;
}

.block2{
  width:10px;
  height:10px;
  float:right;
  margin: 5px;
  background-color:green;
}

/* ---------------------------- */

.div2 {
    margin:10px;
    width:250px;
    /* max-width:200px; */
    font-size: 1.2em;
    border:1px solid blue;
    
    height: 60px;
}
.spanWrapDiv{
  margin: 5px;
  /* required for ellipsis */
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}