[分享]css单行省略号不起作用

在CSS中，经常会用到textoverflow:ellipsis;属性来实现文本内容超出一行时显示省略号，但有时候我们会发现当我们应用这个属性后，文本却并没有出现省略号，如下所示： 这是一段很长很长很...

在CSS中，经常会用到text-overflow:ellipsis;属性来实现文本内容超出一行时显示省略号，但有时候我们会发现当我们应用这个属性后，文本却并没有出现省略号，如下所示：

 <div class="text">这是一段很长很长很长很长很长很长很长很长很长的文本内容</div>

  .text {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } 

我们期望的效果是：这是一段很长很长...，但实际上并没有出现省略号。

这是因为在使用text-overflow:ellipsis;属性时，需要满足以下条件：

• 必须设置元素的宽度

• 必须设置white-space:nowrap;，表示不换行

• 必须设置overflow:hidden;，表示超出部分隐藏

如果没有满足以上条件，text-overflow:ellipsis;就无法起作用。

因此，我们需要检查一下自己的代码，是否存在上述条件的缺失。如果条件都已满足，但仍然无法出现省略号，那么可能是由于字体引起的问题。如果文本的字体过大或过小，省略号可能无法正确显示。

如果是由于字体引起的问题，我们可以尝试使用text-overflow:clip;属性，将超出部分裁剪掉，以达到隐藏的效果。但需要注意的是，这种方法并不会显示省略号。

 .text {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  } 

综上所述，当我们在使用text-overflow:ellipsis;属性时，需要满足特定条件，如果还是无法正确显示省略号，可能是由于字体引起的问题。需要结合具体情况进行调整。