Question

我无法得到＆＃34;文本溢出：省略号;＆＃34;上班... 也许有人可以给那些人一些帮助： - ）

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

我希望＆＃34;第二列＆＃34;由于td的宽度为20px而被切断。我也尝试了不同的divs，tds等变种，但我看不出任何变化。请注意，这在我检查的任何浏览器中都不起作用。所以我肯定会想念。

有数百万页的例子，浏览器差异以及和。但我不能让这个工作！根据当前信息，现在所有主流浏览器都支持简单的文本溢出属性。所以我正在寻找一个纯css解决方案（不是xul，而不是jquery插件），因为这个应该工作。

谢谢， arkascha

Answer 1

这个小提琴对我有用：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>时，它没有继承该属性。

Answer 2

示例中代码的问题是如果有更多内容然后是20px，表会自动放大并忽略20px的设置宽度。以下是一个有效的示例：http://jsfiddle.net/qKS8p/34/

我补充说：

span {
  display:block;
  width:inherit;
}

Answer 3

尝试在同一块级元素（例如text-overflow），like this上设置div属性和固定宽度：

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

无法获得“文本溢出：省略号”;上班

3 个答案:

HTML