Overflow:hidden dots at the end

Solution 1:

You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.

Here's a demo on jsbin.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big butts and I can not lie.
</div>

Solution 2:

Check the following snippet for your problem

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>

Solution 3:

Try this if you want to restrict the lines up to 3 and after three lines the dots will appear. If we want to increase the lines just change the -webkit-line-clamp value and give the width for div size.

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

Overflow:hidden dots at the end

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts