Ellipse Paragraph

by Ninay is Unknown

HTML

<table>
  <tr>
    <td>
<div class="parent">
    <div class="block-ellipsis">
        This is an example of a multi-line ellipsis. We just set the number of lines we want to display before the ellipsis takes into effect and make some changes to kes into effect and make some changes to the CSS and the ellipsis should take into effect once we reach the number of lines we want.
    </div>
</div>
      </td>
    </tr>
  <tr><td class="style2 leftA">
    <div class="purwarp"><div class="purwarp-ellipsis">
        This is an example of an ellipsis. once we reach 300px of length then the text will be cut off.  This is an example of an ellipsis. once we reach 300px of length then the text will be cut off.
    </div></div></td></tr>
  </table>

CSS

.parent {
/*     width:21em; */
 width:45em; 
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size:10pt;
}

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 28px;
  margin: 0 auto;
  font-size: 11pt;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .purwarp{ width:21em;}
.purwarp-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 24px;
  margin: 0 auto;
  font-size: 10pt;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.style2
        {
            width: 456px;
        }
 .leftA {  width:50%; clear:left; padding-bottom: 0.2em; padding:0px 0px 0px 18px;} */