html - 用百分比宽度打破表格单元格中的长字

标签 html css

http://jsfiddle.net/L2yLe/

fiddle 说明了一切。我想要一个仅限 css 的解决方案,将表格的宽度限制为 div 的宽度。长字符串应该被打断(但正如您所见,它没有被打断),这会导致表格溢出。

我不想使用任何像素宽度。这应该是完全流动的。

<div>
<table>
    <tr>
        <td>
            short string
        </td>
        <td>
somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata
        </td>
        <td>
            short string
        </td>
    </tr>
</table>
</div>

div {
    width: 50%;
    background-color: darkgray;
    padding: 15px;
    margin: 10px auto;
}
table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}

最佳答案

大家看看http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
   -ms-word-break: break-all;
   word-break: break-all;

   /* Non standard for webkit */
   word-break: break-word;

   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;

关于html - 用百分比宽度打破表格单元格中的长字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9314238/

相关文章:

javascript - 在 D3 中缩小时如何按时间尺度对图标进行聚类?

html - Bootstrap 4 - col 垂直对齐不按预期工作

javascript - 确保浏览器将下载文件而不是打开它

css - Open Sans SemiBold 在本地主机上似乎不可用

javascript - 将数据从 HTML 表单获取到 Microsoft Flow 的方法,无需页面刷新且无需 php

CSS 高度 :auto starting value?

php - 如何将谷歌自动完成整个 div 移动到另一个 div

html - 将省略号应用于多行文本

html - 在多个元素上触发悬停

html - Float left 不能正常工作