消息关闭
    暂无新消息!
对于下面这种栏目框中的标题列表区域,假设标题过长,则可使用text-overflow属性来裁切,可问题是标题所在的元素不能浮动,否则text-overflow属性就失效了。虽然可以让标题元素不浮动,让日期元素右浮动,但那样又要将日期元素放在标题元素前面,似乎与语义不合,我不喜欢这种方式。有没有办法把标题元素放在日期元素的前面,仍然能够实现裁切标题元素呢。

下面是一个参考代码,要求标题元素必须在日期元素前面,实现上图2端对齐并裁切文本的效果,怎么修改呢?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
a{ text-decoration:none; color:#333; }
.news{ width:420px;  margin-left: 20px;}
.title {
    height: 40px;
    line-height: 40px; /*设置标题栏高度并使内容垂直居中*/
    border-bottom: 2px solid #025483;
  
}
.title h2{    height: 40px;
    float: left; /*标题左浮动*/
    font-size: 18px;
    color: #000;
margin:0; /*去掉h2标记的默认上下边界*/
}
.title .more{    
    float: right;/*“更多”右浮动*/
    height: 22px;
padding-right:10px; /*“更多”右边保留一点间距*/
}
.more a{font-size:14px; text-decoration:none; color:#666;}
.list_one {
    min-height: 245px;/*设置内容区域的最小高度*/
margin-top:10px; /*设置第一条新闻上面的间隙*/
}
.list_one li {
    line-height: 30px;height:30px; /*垂直居中*/
    color: #999;font-size: 14px;
    padding-left: 2px;
text-align:right;
width:410px;
text-overflow: ellipsis;  /*文本溢出则忽略*/
    -o-text-overflow: ellipsis; /*兼容低版本的Opera*/
    white-space: nowrap;  /*强制不换行*/
    overflow: hidden; /*溢出内容隐藏*/  


}
.list_one li a {
 /* display:inline-block;*/
float:left;

}
.list_one li b {
   /* float: right; */font-weight:normal; 
}
</style>
</head>

<body>
<div class="news">
<div class="title">
    <h2>基层动态</h2>
      <span class="more"><a href="more.htm">更多&gt;&gt;</a></span>
 </div>
<ul class="list_one">
   <li><a href="1.htm">计算机科学与技术系举办毕业生欢送会计算机科学与技术系举办毕业生欢送会</a><b>07-25</b></li>
   <li><a href="2.htm">后勤管理处成功举办后勤管理处成功举办</a><b>07-22</b></li>
   <li><a href="3.htm">会计系成功举办2017届学生毕业典礼计算机科学与技术系举办毕业生欢送会</a><b>07-17</b></li>
   <li><a href="4.htm">土木工程学院学生喜获佳绩</a><b>07-13</b></li>
   <li><a href="5.htm">会计系举办2017年专接本交流会</a><b>07-06</b></li>
</ul>
</div>

</body>
</html>

2个回答