如果文本溢出，如何在文本末尾打印 3 个点？ [复制]答案

【问题标题】：How to print 3 dot at the end of the text if text is over flow? [duplicate]如果文本溢出，如何在文本末尾打印 3 个点？ [复制]
【发布时间】：2019-10-24 12:31:14
【问题描述】：

如果文本溢出，哪些 CSS 属性用于在文本末尾打印 3 个点？

【问题讨论】：

使用文本溢出：省略号；属性
嗨 Anand，欢迎来到堆栈溢出！stackoverflow.com/a/1101702/656840
请参考此链接stackoverflow.com/questions/27919860/…

标签： html css

【解决方案1】：

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

&lt;div style="max-width: 400px; margin: 0 auto;"&gt;&lt;P class="para"&gt;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.&lt;/p&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您应该使用 text-overflow CSS 属性设置隐藏的溢出内容如何向用户发出信号。它可以被剪裁、显示省略号 ('...') 或显示自定义字符串。图片你有一个长句子=>“我正在为你写一个长句子” 现在以下每一项都会改变结果

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

请注意，text-overflow 属性不会强制发生溢出。要使文本溢出其容器，您必须设置其他 CSS 属性：溢出和空白。例如：

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;
}

&lt;p class="text-overflow"&gt;This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.&lt;/p&gt;

还有check this link 它为您提供了完整的示例代码

【讨论】：

Codepen 是空的。此外，旨在通过堆栈 sn-ps 在此处提供工作代码 sn-ps。
@AnuragSrivastava 我更新了另一个链接，我也发布了我自己的示例代码，请再次查看并询问我是否有任何问题