在表格单元格中用百分比宽度打断长字 [英] Break long word in table cell with percentage widths

问题描述

http://jsfiddle.net/L2yLe/

小提琴说这一切。我想要一个css解决方案，将表的宽度限制为div的宽度。长字符串应该被破坏（但是你可以看到它不是），并导致表溢出。

The fiddle says it all. I want a css-only solution that limits the width of the table to the width of the div. The long string should be broken (but as you can see it isn't), and that causes the table to overflow.

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

I don't want to use any pixel widths. This should be completely fluid.

<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;
}

推荐答案

a href =http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/> http://blog.kenneth.io/blog/2012/03/ 04 / word-wrapping-hypernation-using-css /

Guys take a look on 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;

这篇关于在表格单元格中用百分比宽度打断长字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！