DIV 中的 TABLE 的 CSS 布局问题答案

【问题标题】：CSS layout issue with TABLE in DIVDIV 中的 TABLE 的 CSS 布局问题
【发布时间】：2017-06-17 00:33:01
【问题描述】：

为什么"aaaaaaaaa..." 不换行并退出div？

<head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

#container {
    background: #888888;
    color: white;
    width: 200px;
    padding: 20px;
}

#container li {
    list-style: none;
}

#container td {
    padding-right: 20px;
}
</style>
</head>

<div id="container">
<table>
    <tbody>
        <tr>
            <td>one</td>
            <td>
                <ul>
                    <li>two</li>
                    <li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>
</div>

【问题讨论】：

@Matt 的确，虽然我更关心 Matthew Frederick 在this one 中所做的努力。
@Matt 我收回我所说的一切；-)

标签： html css html-table

【解决方案1】：

如果您的单词中没有任何空格，那么您的表格将扩展以适应该单词。您对此无能为力（无论如何都不能使用 css）。自动换行仅适用于实际单词（即其中包含空格）。

一个对您有用的解决方案是使用&shy;（软连字符）

<li>aaaaaaaaaaaaaaaaaa&shy;aaaaaaaaaaaaaaaaaaaa</li>

会在中间中断。它只会在需要时中断 - 如果它不适合父容器。

还有许多其他可用的解决方案，其中大多数是不可靠的跨浏览器或破坏您的设计：

分词标签：<wbr> 不可靠。溢出 CSS 语句将破坏您的设计（溢出：自动）或隐藏内容（溢出：隐藏）

所以基本上，没有简单的解决方案。如果可以使用软连字符，效果最好。

您可以查看hyphenator，这是一种在您的网站上自动进行工作休息的方法。

对于您的编辑，如果它是一个变量，那么我肯定会使用连字符。

【讨论】：

文本是 var，不是定义的文本。所以没有任何解决方案？

【解决方案2】：

你要找的是css3功能自动换行：http://www.css3.info/preview/word-wrap/

这有一些浏览器兼容性问题，但我认为如果您确定使用这么长的单词，这是一个选项。

这是一个示例：http://jsfiddle.net/VXgdS/2/

【讨论】：

这在表格中不起作用（据我所知）
是的，它在表格中不起作用。 @Joaquin 你为什么需要这么长的词。我想不出你为什么要把这么长的词放在一个 li 标签里！
因为是评论。我使用了三个
：评论作者、评论文本和评论时间。该表用于左侧和右侧评论作者/文本/时间中的头像。任何想法以另一种方式做同样的事情？

只是不要使用表格。制作 2 个浮动的 div：左。一张带有您的图片，另一张带有评论文本和评论时间。然后你就可以使用 word-wrap / word-break。