欢迎来到中国营销学院!
    验证码: 看不清?点击更换
    密码:
    账号:
15720826943
当前位置:中国营销学院 >>程序相关>>网站建设css文本溢出该怎么处理?CSS处理文字溢出的处置方法

css文本溢出该怎么处理?CSS处理文字溢出的处置方法

发布时间:2018-03-14 10:13  来源:阜阳建站  浏览:   【】【】【
  用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;

white-space:nowrap!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>
文章作者:阜阳建站
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
文章简介
用CSS就能完满处理文字溢出的处置方法 我们 前端设计 的时候,常常会在项目中碰到文字溢出的状况,处理起来也比拟费事,而最大的费事还是在阅读器的兼容成绩上。至多到目前爲止,我还没找到用CSS就能完满处理文字溢出的方法。前几天就再次碰到这个成绩,之后
标签导航
© 全网营销学院 豫ICP备10324321-1

top