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

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:924篇文章
  • 发布时间:2021年03月03日 20:11:54
  • 所属分类:CSS, html, WEB前端
  • 阅读次数:2070次阅读
  • 标签:

  经常会在项目中碰到文字溢出的情况,解决起来也比较麻烦,而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止,我还没找到用CSS就能完美解决文 字溢出的办法。前几天就再次碰到这个问题,之后一查,发现和迅雷的一个页面重构的面试题惊奇的相似,仔细一想,也没啥巧合不巧合的,只能说这种情况太常见 了。

  要求是这样的:一个新闻列表,新闻标题后紧跟着日期,新闻标题的宽度超过一定的宽度就要自动截断,但是日期必须显示完整。

  花了点时间研究了下,最终的效果对于浏览器的兼容不是很理想,但我觉得也是很不错了。

  查看演示

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

  

image.png



  结构写好了,接下来写CSS样式部分了,在这里先重点介绍一个CSS属性:

  text-overflow: ellipsis;

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

  -o-text-overflow: ellipsis;

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

  view sourceprint?

  

  #news-list {

  list-style:none;

  width:156px;  

  }

  #news-list:after {

  content:'';

  display:block;

  clear:both;

  height:0px;

  }

  #news-list li {

  clear:both;  

  }

  #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;  

  background:none;  

  }

  #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;  

  }

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!