score:-1

you can help of dotdotdot() function:

Read More :http://dotdotdot.frebsite.nl/

Demo

score:1

You can do that, but not so easily like one text line.

There are several ways to do that.

Check it out:

Pure CSS multiline text with ellipsis

-webkit-line-clamp: xx(lines to show);

and

Line Clampin’ (Truncating Multiple Line Text)

score:1

For webkit-browsers you can use this CSS:

.block-with-text {
  border: 1px solid #000;
  padding: 5px;
  display: block;
  display: -webkit-box;
  max-width: 400px;
  -webkit-line-clamp: 4; /* max line number */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="block-with-text">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

score:2

Crossbrowser solution through pseudoelements. Requires text-align: justify; and setting the same background-color for pseudoelement as background of parent:

/* styles for ellipsis '…' */ 
.block-with-text {
  /* hide text when we have more than N lines */
  overflow: hidden;
  /* for setting absolutely positioned ellisis '…' */
  position: relative;
  line-height: 1.2em;
  /* max-height = line-height × line number, 1.2 × 3 = 3.6 */
  max-height: 3.6em;
  text-align: justify;  
  /* place for ellipsis '…' */
  padding-right: 1em;
}

/* creating ellipsis … */
.block-with-text:before {
  content: "…";
  position: absolute;
  /* ellipsis move to right bottom corner */
  right: 0;
  bottom: 0;
}

/* hide ellipsis if we have text not more that maximum line numbers */
.block-with-text:after {
  content: "";
  position: absolute;
  /* move to the right bottom corner */
  right: 0;
  /* setting width и height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* hide ellipsis using white background */
  background: white;
}
<div class="block-with-text">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>


Related Query

More Query from same tag