text-overflow:ellipsis;要达到的效果是：文字超出容器宽度时，文字被隐藏的文字用省略号代替。所以该属性只能用于块状元素或行内块元素中，对行内元素是不起作用的。行内元素要显示省略号，需要先转化成块状元素或行内块元素。

一般和white-space:noworp;(强制文字不换行)，overflow:hidden;(文字溢出隐藏)，一起使用。

这里需要注意的是文字多的被用省略号隐藏，是内容显示不完整，需要通过对盒子造成挤压的效果，才会有点的出现。

首先你要保持文本不换行,被挤压时文本隐藏用省略号代替,隐藏文本要设置宽度的,不然不会生效

一般情况下，空间不足会被挤压换行。如果要隐藏文字，就需要在空间不足的情况下，重叠的部分隐藏掉，而且不能换行，这时再加一段超出时用省略号就可以了。

css超出一行显示省略号： 

给定宽度(width:100px)、 

超出隐藏（overflow:hidden）、

强制在同一行显示（white-space: nowrap）、 

省略号（text-overflow:ellipsis）

上面的师兄已经都是给出非常详细的答案了。

无非要满足几个条件：

1.文字超出容器宽度时，文字被隐藏的文字用省略号代替。所以要保证文本不换行。

2.行内元素要显示省略号，需要先转化成块状元素或行内块元素。

3.代码white-space:noworp;(强制文字不换行)，overflow:hidden;(文字溢出隐藏)，一起使用。

【我来说说重点吧，不少回答千篇一律，有何意义】

1，代码使用，一个都不缺

2，效果展示如下，出现了三个点...

3，深刻反思，文字都没挤压在一起，出现省略号，有啥意义呢？

追求的效果是文字挤压在一起，才会出现省略号。

问题是文字都没挤压，省略号已经出现，我看这个细节没人提

那我就提出来好了。

4，网上搜答案，都是丢几个代码出来，细节方面卡的人难受！答案我还没找到。