做网站的时候,经常遇到标题过长,超出格式的话破坏排版,需要"…"加以省略。我
的做法经常是取response.write
left(title,16)&"…",但英文字符占1位而中文字符占2位,导致有些标题长有些短,其实完全可以用css来隐藏掉这些多余的文
字。
比如:
html代码:
<div id="title">
<span>这是我的blog,www.bluesdog.cn,欢迎光临一条狗的窝</span>
</div>
css代码:
<style type="text/css">
#title { width:200px; background:#eee; }
#title span { display:block; width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
</style>
但在FF中用上面的样式是实现不了的,因为text-overflow:
ellipsis;是IE中特有的(非CSS标准)。现在在FF下看到的仅仅只是把溢出的内容切除了,说到”溢出切除”,这下说到点子上了,在FF中实现
就要用到非常规的方法,一个标签作切除内容,再加一个标签作填补省略号用,并且加起来的长度就能超过容器的宽度,本例指的就是DIV的宽度200px,实
现的想法就是这样。那么继续进一试验,关于切除内容,这个已经基本上解决了,那就来说补省略号,不用JS,用CSS实现的话就要用到伪对象after
,先从HTML下手,为span标签外再加一层p标签(当然你也可以加其它标签)
html代码:
<div id="title">
<p><span>这是我的blog,www.bluesdog.cn,欢迎光临一条狗的窝</span><p>
</div>
css代码:
#title p:after{ content:"…"; }
这样还不行,因为省略号是有宽度的,这样省略号就跳到一下行了,下面要做的就是让span 加省略号的宽度不大于容器宽度(准确的说是相等),并且让省略号紧跟内容的内容,下就是解决上面这些问题的CSS样式:
#title p { clear:both; }
#title p span { float:left; max-width:175px; }
#title p:after{ content:"…"; }
这里还要补充的一点是关于p span 的宽度用了"max-width"这个属性,IE不能解释该属性,而FF可以,这样就避开了IE对SPAN宽度的重新应用。上面说得有乱,归纳如下:
html代码:
<div id="title">
<p><span>这是我的blog,www.bluesdog.cn,欢迎光临一条狗的窝</span><p>
</div>
css代码:
#title {
width:200px;/*容器的基本定义*/
background-color:#eee;
}
/* IE下的样式 */
#title p span { display:block; width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
/* FF 下的样式 */
#title p { clear:both;}
#title p span { float:left; max-width:175px; }
#title p:after { content:"…"; }
分享到:
相关推荐
CSS实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width,但是可以设置table的width
wpf Textblock 文字过长时,中间用省略号代替。有好的方法,请回复
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...
js 将多出的字符串用省略号代替 不是一般的那样获取字符串长度和字符字节来判断哦 ^_^ ;基本思路 ;很简单
CSS实现多行文字显示省略号效果.zip
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……
html单元格显示不下的文本用省略号代替,并且鼠标悬停在单元格下面用div显示该单元格的全部文本信息。
CSS实现长标题用省略号显示,以前用JS用网络语言实现,其实CSS也可以的 不错哦~
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有...
使用CSS不用程序实现文字自动截断 用省略号代替
主要介绍了CSS超出文本指定宽度用省略号代替和文本不换行的相关资料,小编觉的实用性非常,特此分享到脚本之家平台,供大家参考
CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
纯css 控制超出宽度部分用省略号显示,纯数字跟连续的英文字母请绕行。
8.如何用省略号显示字符串的其余部分?(Visual C++编程 源代码)8.如何用省略号显示字符串的其余部分?(Visual C++编程 源代码)8.如何用省略号显示字符串的其余部分?(Visual C++编程 源代码)8.如何用省略号...
解决表格内容长度超过限制 表格内容 超过长度用省略号代替
话不多说,我们直接看代码 <!DOCTYPE ...<... <head>...超过的文字用省略号代替的js写法</title> </head> <bo
在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替: 思想为: 首先设置宽度,然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为: 复制代码代码如下:.title{...
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看