crop text too long inside div

Viewed 205883
<div style="display:inline-block;width:100px;">

very long text
</div>

any way to use pure css to cut the text that is too long rather than show on next new line and only show max 100px

6 Answers

Why not use relative units?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }
<div class="cut_text">

very long text
</div>

Related