Question

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

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

您应使用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和空白。例如：

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>

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

如果文本溢出，如何在文本末尾打印3点？

2 个答案: