javascript - 如何动态扩展 div 的宽度以适合一个非常长的单词？

Question

我正在尝试使用 div、css 和 jQuery 复制基本 HTML 表格的功能。主要要求是允许每一行从同一位置开始，而不管该行中其他列的结束位置。他们都需要一起开始。

我正在使用 this fiddle 中的代码，到目前为止它运行良好。

问题是由于我的应用程序的性质，我的列的宽度需要缩小以适应更多的列。许多这些列包含来自其他语言的文本，这使得该词可能比我为该列分配的列宽更宽(我通过将 View 的宽度 (100%) 除以列数来做到这一点)。

fiddle 展示了这个问题的一个例子，一个长词比列宽。在保留我迄今为止建立的所有其他功能的同时，是否有可能使 div 的宽度至少为 X，但如果有一个非常宽的词，它扩展并变得和那个词一样宽？

如果内容增长到比 View 宽度还宽，那是完全没问题的，这意味着如果它必须增长到 120% 或其他什么，滚动到一边是没有问题的。
编辑:更新的 fiddle 链接

Answer 1

我发现这样做的唯一方法是使用一些 hack。

1。创建一个临时div

   //place in new element
   $("body").append("<div id='testParent'></div>");

2。将每个单词作为 span 添加到临时 div 中

   var words = $(this).html().split(" ");
   for(var i = 0; i < words.length; i++)
   {
        $("#testParent").append("<span>"+words[i]+"</span>");
   }

3。设置 CSS:

div#testParent
{
    display: inline-block;
    width: auto;
}

div#testParent span{
    display:block;
}

4。获取临时 div 的宽度并相应地设置父 div 的宽度

   var width = $("#testParent").width();
   $("#testParent").remove();

   if(width > $(this).width())
       $(this).parent(".td-outer").width(width);

我将上面的代码应用到你的 fiddle 中的第一个元素:

JSFiddle