相关疑难解决方法(0)

我目前想知道两者之间有什么区别.当我使用它们时,如果它不适合容器,它们似乎打破了这个词.但为什么W3C有两种方法呢？

我想在左侧有一个带有标题的表格,标题应该尽可能地窄,并且值的空间应该占据页面宽度的其余部分.标题应该都在一行上,除非标题单元格的内容很长,此时标题应该包裹在多行上.

内容短,这有效:

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>

CSS:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    white-space: nowrap;
}

但是,当我尝试添加最大宽度而不是换行时,内容会溢出文本框:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    white-space: nowrap;
    max-width: 300px;
    word-break: break-all;
}

演示:https://jsfiddle.net/2avm4a6n/

似乎white-space: nowrap;样式会覆盖word-break: break-all;,因此max-width: 300px;导致文本溢出.我正在使用white-space: nowrap;和width: 10px;组合使标题列尽可能地缩小,而不包括在最小宽度以下使用空格的标题,但只包含width: 10px;和word-break: break-all;导致标题包装成单个字符以适应窄10px.

知道怎么用css做这个吗？