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

Question

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

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

问题在于，由于我的应用程序的性质，我的列的宽度需要缩小以适应更多列。其中许多列包含来自其他语言的文本，这使得单词可能比我分配列的列宽更宽（我通过将视图的宽度（100％）除以列数来实现）。

这个小提琴显示了这个问题的一个例子，一个长词比列宽。在保留我到目前为止构建的所有其他功能的同时，是否可以使div的宽度至少为X，但是如果有一个非常宽的单词，它会扩展并变为和那个词一样广泛？

如果内容比视图宽度更宽，那就非常好了，这意味着如果它必须增长到120％或者其他什么，滚动到一边就没问题了。
编辑：更新了小提琴链接

Answer 1

我发现这样做的唯一方法就是使用一点点黑客。

1。创建一个临时div

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

2。将每个单词作为范围

添加到临时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);

我将上面的代码应用到小提琴中的第一个元素：

JSFiddle