文字益处,浏览者习惯看到“...”来提示他们这行字还有其他部分,但是由于空间不够,网页帮你隐藏起来了。
这种效果除了在服务器端预处理,还可以用JS来折腾。其实CSS也可以实现,只是浏览器兼容性问题又让你不得好死……
在这里发现一个思路很好的解决方法
http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html
我也是遇到这个问题找帖子来救急的,FF下还是没搞定,但是按照这个思路肯定是可以的。以后再研究。
html代码:
<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p>
</div>
css代码:
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}
/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* FF 下的样式 */
p{clear:both;}
p span{
float:left;
max-width:175px; /*IE不能解释该属性,而FF可以*/
}
p:after{
content:"...";
}
分享到:
相关推荐
直接替换beautify-css.js文件,重启HB就可以,具体路径直接在hbuilder/plugins文件夹下搜索beautify-css.js
纯css3艺术文字样式效果代码 纯css3艺术文字样式效果代码
css3文字特效_css3火焰文字_css3文字渐变代码
html5 css3带翻页数字时钟动画特效 html5 css3带翻页数字时钟动画特效 html5 css3带翻页数字时钟动画特效
HTML5 CSS3实现3D感极强的彩色立体文字源码,这个效果超赞啊,这种三维风格我很喜欢,而且...在CSS和JS中可修改三维效果选项,鼠标滑过文字时,文字响应鼠标,会晃动。本效果支持移动端和PC端的HTML5浏览器。源码完整。
纯js实现单行文字滚动 无需任何js库支持 直接运行
css3翻转文字css3翻转文字css3翻转文字css3翻转文字css3翻转文字
css 数字美化, 电子表样式
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
1.div中单行文字垂直水平居中。条件:外层div高度已经给定。代码如下: 复制代码代码如下: <style type=”text/css”> .div3{ border:1px solid red; text-align:center; height:200px; line-height:200px; ...
css字贴解决方案css字贴解决方案css字贴解决方案
CSS3数字时钟,英文格式年月日 大字体时:分:秒
前段时间遇到一个web页面需求:要纵向放大字体的比例,就是纵向拉伸字体。多方试验,最终通过css控制字体高度,设置宽高比,可获得纵向拉伸字体效果。代码真实立即可用。
用css使单行超出指定宽度的内容切去并在结尾出现省略号 用css使单行超出指定宽度的内容切去并在结尾出现省略号
CSS凹陷文字! 很值得下载看看!资源免费,大家分享!!
CSS3+HTML5实现漂亮LED数字时钟
css小笔记,关于如在使用css在 边框上写入文字?
javascript与css实现文字闪烁 javascript与css实现文字闪烁