无法让"text-overflow: ellipsis;“工作
无法让"text-overflow: ellipsis;“工作
提问于 2012-03-04 21:47:44
我不能让“文本溢出:省略号；”工作...也许有人可以在这个问题上给妈妈一些帮助：
小示例：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插件)，因为这应该可以工作。
谢谢，阿卡沙
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-03-04 22:05:22
示例中代码的问题是，如果内容超过20px，表格会自动放大并忽略设置的宽度20px。下面是一个有效的示例：http://jsfiddle.net/qKS8p/34/
我补充道：
span {
display:block;
width:inherit;
}Stack Overflow用户
发布于 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>时，它没有继承该属性。
Stack Overflow用户
发布于 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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9555398
复制相关文章
相似问题
腾讯云开发者
