使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题
本人刚刚实习,第一次写东西,希望大家多多鼓励。
项目中需要实现标题超过一定长度以省略号的形式显示,不是什么难的问题。可是我不想用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时必须得给作用的元素设置宽度,而行内元素直接设置宽度是不可以的,而我是用的<span>标签,之所以我float:left可以实现效果是因为行内元素在使用了float后会变成块元素,如果我加了display:block效果是一样的,所以碰到这种情况只要将要显示的元素设置成块元素就可以了。
使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题的更多相关文章
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
4要素: width: 125px; //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
http://www.52css.com/article.asp?id=602 =================================================== html ...
- 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数:二是有利于SEO.需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好 ...
- text-overflow:ellipsis ,溢出文本显示省略号
text-overflow:ellipsis 对溢出文本显示省略号有两个好处, 一是不用通过程序限定字数 二是有利于SEO. 需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友 ...
- css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
- 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
- css溢出文本显示省略号
css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...
- css text-overflow溢出文本显示省略号
<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...
- (轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)
轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p>&l ...
随机推荐
- Knockout绑定audio的pause事件导致音频无法停止
...时间过得真快, 一晃4天已经过去了, 然而自己并没有动笔写什么. 自省. 看了看今天的工作, 感觉好像没什么可写的. 不禁在想是不是一天一篇有点儿难. 再一想, 这分明就是在给自己找理由. 就是 ...
- linux 复制文件时,报cp: omitting directory `XXX'
今天在用linux命令进行文件复制时omitting cp -i BBS /opt/workspace/apache-tomcat-6,参数用的是 -i),所以也不太熟悉,原来,还有子目录文件,而是必 ...
- oracle core04_undo
undo信息 oracle中undo的信息主要完成下面的功能: 1,构建块一致性读 2,回滚事务 UBA:undo block address 1,块中的事务槽ITL中的UBA表示这个ITL所在的bl ...
- Linux命令行及Vim简单学习记录
Linux命令行 1.打开命令行 Ctrl+Alt+t 2.目录 显示当前目录的文件列表 ls 跳转至当前目录中的x文件夹 cd x 返回根目录 cd 3.文件 新建文件1.cpp touch ./1 ...
- Apache Struts 跨站脚本漏洞
漏洞名称: Apache Struts 跨站脚本漏洞 CNNVD编号: CNNVD-201311-010 发布时间: 2013-11-04 更新时间: 2013-11-04 危害等级: 漏洞类型 ...
- 安装scrapy
- HDOJ --- 1160
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- HDOJ/HDU 1241 Oil Deposits(经典DFS)
Problem Description The GeoSurvComp geologic survey company is responsible for detecting underground ...
- JavaScript高级程序设计54.pdf
过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...
- Spring实例化bean的三种方法
1.用构造器来实例化 <bean id="hello2" class="com.hsit.hello.impl.ENhello" /> 2.使用静态 ...