使 HTML 表格单元格的内容适合 - 不换行？答案

【问题标题】：Make HTML table cell's content fit - without wrapping?使 HTML 表格单元格的内容适合 - 不换行？
【发布时间】：2012-08-12 18:42:30
【问题描述】：

这是我的情况：

我目前正在完成一个相当大的 Web 应用程序（PHP 与 CodeIgniter、MySQL、Javascript+Ajax+Jquery 并使用各种 Javascript 库 - 例如 dataTables）

问题：

假设我们有一个固定宽度的表格。
第一列也是固定宽度。（比如说200px）
填充表格时：
- 如果第一列的内容占用不到200px的空间，没关系。
- 如果内容超过 200 像素，则 内容被包裹，从而产生“双线”效果和 比我希望的更高的行。

提示：

“缩小”very very very long line 到类似very very very ... 是我的想法。这样的事情可能吗？服务器端？

您将如何处理？ （最好以优雅的方式 - '因为，是的，我承认我有一些解决方案，但似乎都没有......用户友好......哈哈）

【问题讨论】：

您希望发生什么？
@BillyMoat 刚刚更新了我最初的帖子，让您大致了解一下。
也许像这个 jQuery 插件？ plugins.learningjquery.com/expander
可能会在某个点被截断，只在悬停阅读更多链接时显示完整内容？
@BillyMoat 嗯.. 真的有一个 jQuery 插件可以做任何事情！哈哈。谢谢！我目前正在研究它。

标签： html css html-table row word-wrap

【解决方案1】：

我认为在服务器端进行字符串截断是不可能的，如果您不使用等宽字体，那么相同数量的字符始终具有相同的宽度。您可以做的是客户端字符串截断：

（Calculate text width with JavaScript 的好代码）：

CSS：

#testing-div
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
}

JS：

var test = document.getElementById("testing-div");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px";

您可以遍历字符串的整个长度，并不断在#testing-div 的正文中添加一个字符，计算宽度并检查它是否合适。如果字符串太长，请确保添加...。

【讨论】：