我不能让“文本溢出:省略号;”工作...也许有人可以在这个问题上给妈妈一些帮助:
小示例:http://jsfiddle.net/qKS8p/2/
http标记:
<table class="" border="1">
<tr><td colspan=3>…</td></tr>
<tr class="">
<td width="90"><span class="prose">column one</span></td>
<td width="20"><span class="prose">column two</span></td>
<td width="90"><span class="prose">column three</span></td>
</tr>
<tr><td colspan=3>…</td></tr>
</table>
css样式规则:
.prose {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
我预计“第二列”会被砍掉,因为td的宽度是20px。我也用div,tds等尝试了不同的变体,但我看不到任何变化。请注意,这在我检查过的任何浏览器中都不起作用。因此,我肯定错过了一些东西。
有数以百万计的页面是关于示例,浏览器差异和。但是我不能让它工作!根据目前的信息,现在所有主流浏览器都支持简单的文本溢出属性。所以我正在寻找一个纯粹的css解决方案(不是xul,不是jquery插件),因为这应该可以工作。
谢谢,阿卡沙
发布于 2012-03-04 22:05:22
示例中代码的问题是,如果内容超过20px,表格会自动放大并忽略设置的宽度20px。下面是一个有效的示例:http://jsfiddle.net/qKS8p/34/
我补充道:
span {
display:block;
width:inherit;
}
发布于 2012-03-04 22:00:55
这把小提琴很适合我:http://jsfiddle.net/wRruP/3/
HTML
<div><span>column one</span></div>
<div>column two</div>
<div><p>column three</p></div>
### CSS
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 40px;
}
似乎必须在限制文本宽度的块上设置text-overflow
。<span>
是一个内联元素,它没有真正的宽度,因此不能真正切断文本,并且当我嵌套一个<p>
时,它没有继承该属性。
发布于 2012-03-04 21:59:50
尝试在相同的块级元素(如div
) like this上同时设置text-overflow
属性和固定宽度
<table class="" border="1">
<tr><td colspan=3>…</td></tr>
<tr class="">
<td><div class="prose" style="width: 90px">column one</div></td>
<td><div class="prose" style="width: 20px">column two</div></td>
<td><div class="prose" style="width: 90px">column three</div></td>
</tr>
<tr><td colspan=3>…</td></tr>
</table>
使用您的原始CSS:
.prose {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
https://stackoverflow.com/questions/9555398
复制相似问题