How to print 3 dot at the end of the text if text is over flow?

Question

which CSS properties is used to print 3 dot at the end of the text if text is over flow?

Answer 1

.para{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div style="max-width: 400px; margin: 0 auto;"><P class="para">Lorem ipsum dolor sit amet, quas malorum qui an. Ius reque fugit labore te. Te eam decore comprehensam, te brute petentium per. Usu melius antiopam scripserit in.</p></div>

Answer 2

You should use the text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string. image you have a long sentence => "I'm writing a long sentence for you" now each of the following change the result

text-overflow: clip;     // I'm writing a long sentence for 
text-overflow: ellipsis; // I'm writing a long sentence for ...
text-overflow: "-";      // I'm writing a long sentence for -
text-overflow: "";       // I'm writing a long sentence for

Note that the text-overflow property doesn't force an overflow to occur. To make text overflow its container you have to set other CSS properties: overflow and white-space. For example:

overflow: hidden;
white-space: nowrap;

.text-overflow {
  /* custom style */
  width: 10em;
  outline: 1px solid #000;
  margin: 0 0 2em 0;
  
  /* by text-overflow you can trim your text */
  text-overflow: ellipsis;
  
  /**
   * Required properties to achieve text-overflow
   */
  white-space: nowrap;
  overflow: hidden;
}

<p class="text-overflow">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

also check this link it covers a full sample code for you