如何在DIV中包含表

Question

我有一个包含表的外部div标记。该表包含1列或TD标记。这个TD标签有一个显示公司名称的内部DIV。

有时公司名称对于外部DIV来说太长，这取决于外部DIV的宽度。所以我在TD的DIV标签中添加了以下样式：

style="width:95%; text-align: center; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space:nowrap; overflow:hidden"

这样做效果相当好，一个长的公司名称将包含在外部DIV中，公司名称的一部分缺失，公司名称末尾有"…"。

我遇到的问题是，如果外部DIV的大小太小或公司名称太长，那么公司名称TD标签将溢出到右侧不相关的DIV标签中。

当外部DIV的大小约为400px，但公司名称为700px时，就会发生这种情况。但一个600像素的公司名称在400像素的外部DIV.中如预期的那样工作

如何使表的TD和内部DIV标记始终显示在外部DIV标记的宽度内部？

下面是正在发生的事情的一个例子。第一行是我想要的，但如果包含的DIV宽度较窄，则省略号不会显示，并且表会流血到右侧的DIV：jsfiddle example

Answer 1

尝试将文本包装在div中，使用以下类：

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */    
    white-space: -pre-wrap;     /* Opera <7 */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
}