100％宽度表中的省略号[重复]答案

【问题标题】：Ellipsis in 100% width table [duplicate]100％宽度表中的省略号[重复]
【发布时间】：2014-09-16 23:09:29
【问题描述】：

我的基本省略号样式和标记如下（fiddle）：

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<table>
<tbody>
<tr>
    <td>Row Start (1)</td>
    <td class="ellipsis">Lectus ligula uspendisse tiam per sodales feugiat tempus ante pede vitae amet conubia raesent tincidunt n feugiat id ad mi dapibus</td>
    <td>Row End</td>
</tr>
<tr>
    <td>Row Start (2)</td>
    <td class="ellipsis">Placerat consectetuer inceptos dictum mollis adipiscing placerat sed tincidunt ullam id onec lectus sagittis consequat conubia tempus eleifend ad orbi risus hac dolor accumsan commodo a eros ed consectetuer odio feugiat dignissim dictum at ullam ligula mollis sollicitudin rutrum viverra in feugiat conubia metus uspendisse sit non imperdiet unc liquam</td>
    <td>Row End</td>
</tr>
</tbody>
</table>

...但它只是让我的表格拉伸以将所有内容放在一行中，并且文档得到一个很好的水平滚动。对于非表块级元素，相同的代码可以正常工作。

是否有不强制我使用固定宽度的解决方法？

【问题讨论】：

将table-layout:fixed 和width: 100% 添加到table 怎么样？
你能分享块级元素的工作代码吗？
@SureshPonnukalai - 只是你看到的 CSS 加上 <div class="ellipsis">Long text</div>
看看这是否有帮助。 text-overflow: ellipsis in table-cell without width
抱歉，我刚刚发现 this same question 的答案很好。我不知道为什么我以前找不到它。

标签： html css

【解决方案1】：

添加max-width 属性。

JSBIN

【讨论】：

【解决方案2】：

http://jsbin.com/jehaxequ/1/edit

TD 最大宽度是一个解决方案。如果你不知道 td 的最大宽度，用 CSS 解决这个问题并不容易，但是可以使用一点 jquery 或 javascript 来计算 td 的最大宽度，并将其“实时”添加到元素属性中.

【讨论】：

感谢您的建议，但每次我摆弄 JavaScript 来做这种事情时，我最终都会后悔。如果您想考虑动态脚本或只是调整窗口大小，则不可能做到正确。
...随便...你的小提琴确实有效，它显然忽略了max-width: 300px;风格:-?
它有效，但 td 的宽度总是重新计算为表格的百分比:)。
不在我的实际标记中:) 但我需要仔细看看。
好的，没问题。这将对您有所帮助：stackoverflow.com/questions/14765817/…