http://www.wssh.net/

【css样式】用CSS就能完美办理文字溢出的处理惩罚步伐

  <li><a href="#">设计师请别把本身不妥人。</a><span>2010-09-18</span></li>

  background:none; /*办理IE6的莫名高度BUG,试试在IE6下去掉这个属性*/

  padding-left:10px;

  -o-text-overflow: ellipsis;

  margin-right:-99px; /*让标题和日期显示在同一行*/

  text-overflow: ellipsis;

  #news-list li a:hover {

  }

  <li><a href="#">一个网页设计需求方眼中的网页设计</a><span>2010-09-18</span></li>

  color:#666;

  width:156px; /*留意这个宽度*/

  查察演示

  <li><a href="#">什么样的包装才叫做有新意的包装呢?</a><span>2010-09-18</span></li>

  布局写好了,接下来写CSS样式部门了,在这里先重点先容一个CSS属性:

  #news-list li span {

  #news-list li {

  <ol id="news-list">

  font-size:13px;

  <li><a href="#">如何应对骗稿的客户</a><span>2010-09-18</span></li>

  text-overflow就是界说文字溢出的时候,该如何截断文字,属性值是ellipsis的时候就是当工具内文本溢出的时候显示省略标志(…),该属性支持IE6以上的版本IE7/8/9和除Firefox以外的现代尺度欣赏器:Chrome、Safari。Opera是个特例,但也有一个专门针对Opera的属性:

  text-decoration:underline;

  float:left; /*标题向左浮动*/

  max-width:156px; /*给尺度欣赏器一个最大宽度*/

  color:#000;

  _position:relative; /*针对IE6利用相对定位*/

  white-space:normal; /*溢出的时候文字换行,并共同上面的牢靠高度,对文字举办裁切*/

  </style>

  overflow:hidden;

  #news-list li a {

  #news-list:after {

  -o-text-overflow:ellipsis; /*Opera的专用截断文字的属性*/

  <li><a href="#">求平面设计同行们的履历指引</a><span>2010-09-18</span></li>

  花了点时间研究了下,最终的结果对付欣赏器的兼容不是很抱负,但我以为也是很不错了。

  content:'';

  <li><a href="#">平面设计师:一个涂有虚名的职业</a><span>2010-09-18</span></li>

  用CSS就能完美办理文字溢出的处理惩罚步伐

  view sourceprint?

  要求是这样的:一个新闻列表,新闻标题后紧随着日期,新闻标题的宽度高出必然的宽度就要自动截断,可是日期必需显示完整。

  text-decoration:none;

  list-style:none;

  <li><a href="#">毛毛猫系列漫画</a><span>2010-09-18</span></li>

  好了,下面就是完整的CSS代码

  <li><a href="#">站在十字路口的网站设计师</a><span>2010-09-18</span></li>

  #news-list {

  <li><a href="#">寻隐勾当寻找网页设计开拓好手</a><span>2010-09-18</span></li>

  white-space:nowrap !important; /*强制文字不换行(尺度欣赏器)*/

  常常会在项目中遇到文字溢出的环境,办理起来也较量贫苦,而最大的贫苦照旧在欣赏器的兼容问题上。至少到今朝为止,我还没找到用CSS就能完美办理文字溢出的步伐。前几天就再次遇到这个问题,之后一查,发明和迅雷的一个页面重构的口试题诧异的相似,仔细一想,也没啥巧合不巧合的,只能说这种环境太常见了。

  }

  <style type="text/css">

  height:0px;

  用CSS就能完美办理文字溢出的处理惩罚步伐   常常会在项目中遇到文字溢出的环境,办理起来也较量贫苦,而最大的贫苦照旧在欣赏器的兼容问题上。至少到今朝为止,我还没找到用CSS就能完美办理文字溢出的步伐。前几天就再次遇到这个问题,之后一查,发明和迅雷的一个页面重构的口试题诧异的相似,仔细一想,也没啥巧合不巧合的,只能说这种环境太常见了。   要求是这样的:一个新闻列表,新闻标题后紧随着日期,新闻标题

  }

【css样式】用CSS就能完美办理文字溢出的处理惩罚步伐

  float:left; /*日期向左浮动*/

  clear:both; /*排除li中的浮动*/

 【css样式】用CSS就能完美办理文字溢出的处理惩罚步伐

  clear:both;

  color:#333;

  </ol>

  看到这个要求,根基上就知道HTML的布局该怎么写了,一个有序列表(ol+li):

  display:block;

  text-overflow:ellipsis; /*截断文字,显示省略号(…)*/

  }

  }

  height:24px;

  }

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。