html中新闻标题字数的限制,CSS排版——新闻标题自适应宽度

就是常见的新闻列表，左边是标题，最右是时间，一个ul li列表。像下面这种：

HTML也灰常简单：

• 新闻标题

  10-21

我想做到这样的效果：ul的宽度是自适应也就是不固定的，li占ul 100%宽度，标题靠左，时间靠右。时间span的宽度可以固定，标题a则不固定，随着ul宽度的变化，当a的文本碰到右边span时就显示省略号不换行不将li撑开！

这里边，要限制元素内文本单行显示溢出添加…省略号，这个元素就必须是指定宽度的，否则它就会将容器撑开！如果在li上限制单行，a一长右边时间就不见了。所以只能在a上限制，这样就必须给a宽度。

首先我们使用的HTML结构如下：

• 这是很长的新闻标题这是很长的新闻标题这是很长的新闻标题这是很长的新闻标题这是很长的新闻标题这是很长的新闻标题

  07-18

• 这是很长的新闻标题这是很长的新闻标题这是很长的新闻标题这是很长的新闻标题这是很长的新闻标题这是很长的新闻标题

  07-18

定义基本的CSS：

ul,li {padding: 0;width: 600px}

.text-oneline {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.date {

float: right;

}

这时的效果是这样的，虽然ul,li定了宽度，但由于限制a不换行，给撑开了：

下边来给a添加宽度，由于要自适应，想到如下方案：

1、使用百分比

.title {

display: inline-block;

width: 90%;

}

这样子基本可以满足。a标题占90%，随着整个ul的缩小，留给右边时间的宽度也会越来越小，有可能造成右边时间宽度不够而换行。

2、使用calc计算

.title {

display: inline-block;

width: calc(100% - 40px);

}

这里使用calc计算左边宽度，保证右边有40px来显示时间，没有任何问题。注意：calc()括号内的运算符号与数值必须有空格！

3、使用flex布局

li {

display: flex;

}

.title {

flex: 1;

}

以上三种方案，方案一兼容IE6，方案2兼容IE9，方案三兼容IE10(猜测)。方案一不完美，方案二、三没任何问题。但我看了几个网站都是将a写死宽度的，那样的话就没什么可说的了。