星空网 > 软件开发 > 网页设计

使用 text

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

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

于是就用了如下代码

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

可是效果出现了一点问题

使用 text

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

使用 text

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

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




原标题:使用 text

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流