香港葡京赌侠诗(中国)有限公司

?
各地市:
郑州网站建设 洛阳网站建设 开封网站建设 安阳网站建设 新乡网站建设 濮阳网站建设 焦作网站建设 鹤壁网站建设 三门峡网站建设 商丘网站建设 许昌网站建设 漯河网站建设 平顶山网站建设 驻马店网站建设 周口网站建设 南阳网站建设 信阳网站建设 济源网站建设 二七区网站建设 中原区网站建设 管城区网站建设 惠济区网站建设 金水区网站建设 上街区网站建设 巩义市网站建设 新密市网站建设 登封市网站建设 荥阳市网站建设 中牟县网站建设 经开区网站建设 高新区网站建设 涧西区网站建设 西工区网站建设 老城区网站建设 瀍河回族区网站建设 洛龙区网站建设 吉利区网站建设 偃师市网站建设 孟津县网站建设 新安县网站建设 洛宁县网站建设 宜阳县网站建设 伊川县网站建设 嵩县网站建设 栾川县网站建设 汝阳县网站建设 杞县网站建设 兰考县网站建设 通许县网站建设 尉氏县网站建设 开封县网站建设 金明区网站建设 顺河回族区网站建设 龙亭区网站建设 鼓楼区网站建设 禹王台区网站建设 安阳县网站建设 林州市网站建设 内黄县网站建设 汤阴县网站建设 滑县网站建设 龙安区网站建设 殷都区网站建设 文峰区网站建设 北关区网站建设 辉县市网站建设 卫辉市网站建设 新乡县网站建设 获嘉县网站建设 原阳县网站建设 延津县网站建设 封丘县网站建设 长垣县网站建设 卫滨区网站建设 红旗区网站建设 牧野区网站建设 凤泉区网站建设 华龙区网站建设 清丰县网站建设 南乐县网站建设 濮阳县网站建设 莘县网站建设 范县网站建设 台前县网站建设
当前位置: 主页 > 建站常识 > 网站设计观点 >

用CSS就能完美解决文字溢出的处理办法

发布时间:2017-03-14 17:10 | 发布者:香港葡京赌侠诗 | 浏览次数:次

用CSS就能完美解决文字溢出的处理办法
经常会在项目中碰到文字溢出的情况,解决起来也比较麻烦,而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止,我还没找到用CSS就能完美解决文字溢出的办法。前几天就再次碰到这个问题,之后一查,发现和迅雷的一个页面重构的面试题惊奇的相似,仔细一想,也没啥巧合不巧合的,只能说这种情况太常见了。
要求是这样的:一个资讯列表,资讯标题后紧跟着日期,资讯标题的宽度超过一定的宽度就要自动截断,但是日期必须显示完整。
花了点时间研究了下,最终的效果对于浏览器的兼容不是很理想,但我觉得也是很不错了。
查看演示
看到这个要求,基本上就知道HTML的结构该怎么写了,一个有序列表(ol+li):
<ol id="news-list">
<li><a href="#">毛毛猫系列漫画</a><span>2010-09-18</span></li>
<li><a href="#">一个网页设计需求方眼中的网页设计</a><span>2010-09-18</span></li>
<li><a href="#">如何应对骗稿的客户</a><span>2010-09-18</span></li>
<li><a href="#">平面设计师:一个涂有虚名的职业</a><span>2010-09-18</span></li>
<li><a href="#">站在十字路口的网站设计师</a><span>2010-09-18</span></li>
<li><a href="#">设计师请别把自己不当人。</a><span>2010-09-18</span></li>
<li><a href="#">什么样的包装才叫做有新意的包装呢?</a><span>2010-09-18</span></li>
<li><a href="#">寻隐活动寻找网页设计开发高手</a><span>2010-09-18</span></li>
<li><a href="#">求平面设计同行们的经验指引</a><span>2010-09-18</span></li>
</ol>
结构写好了,接下来写CSS样式部分了,在这里先重点先容一个CSS属性:
text-overflow: ellipsis;
text-overflow就是定义文字溢出的时候,该如何截断文字,属性值是ellipsis的时候就是当对象内文本溢出的时候显示省略标记(…),该属性支撑IE6以上的版本IE7/8/9和除Firefox以外的现代标准浏览器:Chrome、Safari。Opera是个特例,但也有一个专门针对Opera的属性:
-o-text-overflow: ellipsis;
好了,下面就是完整的CSS代码
view sourceprint?
<style type="text/css">
#news-list {
list-style:none;
width:156px;  /*注意这个宽度*/
}
#news-list:after {
content:;
display:block;
clear:both;
height:0px;
}
#news-list li {
clear:both;  /*清除li中的浮动*/
}
#news-list li a {
float:left;  /*标题向左浮动*/
color:#333;
text-decoration:none;
font-size:13px;
max-width:156px;  /*给标准浏览器一个最大宽度*/
height:24px;
!important;  /*强制文字不换行(标准浏览器)*/
white-space:normal;  /*溢出的时候文字换行,并配合上面的固定高度,对文字进行裁切*/
overflow:hidden;
text-overflow:ellipsis;  /*截断文字,显示省略号(...)*/
-o-text-overflow:ellipsis;  /*Opera的专用截断文字的属性*/
background:none;  /*解决IE6的莫名高度BUG,试试在IE6下去掉这个属性*/
}
#news-list li a:hover {
color:#000;
text-decoration:underline;
}
#news-list li span {
float:left;  /*日期向左浮动*/
color:#666;
padding-left:10px;
margin-right:-99px;  /*让标题和日期显示在同一行*/
_position:relative;  /*针对IE6使用相对定位*/
}
</style>
?
?

香港葡京赌侠诗|香港葡京赌侠诗

XML 地图 | Sitemap 地图