使用text-overflow:ellipsis溢出文本显示省略号时碰到的小问题_html/css_

本人刚刚实习，第一次写东西，希望大家多多鼓励。

项目中需要实现标题超过一定长度以省略号的形式显示，不是什么难的问题。可是我不想用js实现，就百度了发现 text-overflow: ellipsis; （其实很久就有了，不过之前都不知道）这个样式可以实现这种效果，而且所有主流浏览器都支持 text-overflow 属性。

于是就用了如下代码

.ellipsis{    width:300px;    white-space: nowrap;    word-break: break-all;    overflow: hidden;    text-overflow: ellipsis;} 

可是效果出现了一点问题

这个问题让我很费解，后来我试试加了一个 float:left; 居然好了

我想 text-overflow 和 float 应该没有关系吧，我又试了试 display:block,display: inline-block 发现也行，

我又去百度了一下发现使用 text-overflow: ellipsis 时必须得给作用的元素设置宽度，而行内元素直接设置宽度是不可以的，而我是用的 标签, 之所以我 float:left 可以实现效果是因为行内元素在使用了float后会变成块元素，如果我加了 display:block 效果是一样的，所以碰到这种情况只要将要显示的元素设置成块元素就可以了。

查看更多关于使用text-overflow:ellipsis溢出文本显示省略号时碰到的小问题_html/css_的详细内容...