Html 用长单词包装表格单元格

我试着按照这里的解释：

但是我不能让一些东西来包装我的“XXXXXXXXXXXX”行

用户id
用户名
类型
身份证件
广告内容
创建于
66666
约翰·史密斯
类型1
99999
良好的文字和真实句子的内容。
2015-09-02
777777
马丁·伊莎贝尔
类型2
888888
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
2015-09-02

Css代码：

table {
    width: 100%;
}
td {
    text-align: right;
    white-space: nowrap;
}
td div {
    white-space: normal;
    word-break: break-all;
    display: block;
}

---

选项1.添加

表格布局：修复了
wordwrap
css在原始代码中的表格布局。

备选案文2。使用
断字：断字css属性。并设置td的最小宽度
更新了JS Fiddle
您需要为表格单元格指定最小和最大宽度，而不是表头

.my-list {
    max-width: 100%;
}

th {
}

td {
    max-width: 300px;
    min-width: 150px;
    word-wrap: break-word;
}

相关（断字）：。非常感谢！这个简单的解决方案解决了一个痛苦的问题。
.my-list {
    max-width: 100%;
}

th {
}

td {
    max-width: 300px;
    min-width: 150px;
    word-wrap: break-word;
}