html - 如何防止表格单元格在 CSS 中换行？

Question

我有一个 HTML 文档，其中包含一些这样的表格:

<table>
    <tr>
        <td>
            term
        </td>
        <td>
            this is a definition
        </td>
    </tr>
</table>

看起来像这样:

 _____________________________
| term | this is a definition |
|______|______________________|

当我在第一列中键入一个由两个词组成的词时，例如“Web 浏览器”，结果如下:

 _____________________________
| Web     | a tool for using  |
| browser | the WWW           |
|_________|___________________|

如何在 CSS 中调整此行为，以便只有当内容超过表格宽度的 50% 时，第一列才会换行？

理想情况下，左侧单元格中的术语永远不应有换行符:

 _____________________________
| Web browser | a tool for    |
|             | using the WWW |
|_____________|_______________|

如果左侧单元格中的术语确实很长，例如超过表格宽度的 50%，则可以换行:

 _____________________________
| this is a long | .......... |        
| term           | .......... |
|________________|____________|

这在 CSS 中如何实现？

Answer 1

这样做

 html,body,table{
    width:100%;
    height:100%
 }
 tr > td:first-child{
    white-space:nowrap;
    max-width:50%;
    word-break:break-all;
 }