相关疑难解决方法(0)

CSS:约束一个具有长单元格内容到页面宽度的表格?

采用以下CSS + HTML:

<style>
    div.stuff {
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
    }
    table { width: 100%; }
    td { border: 1px dotted black; }
</style>

<table>
    <tr><td>
        <div class='stuff'>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
    </td></tr>
</table>
Run Code Online (Sandbox Code Playgroud)

这会导致表增长以容纳整个长文本.(使浏览器窗口变小,看是否有很大的屏幕分辨率.)

我添加width: 100%overflow: hidden指出长文本应该简单地删除,但似乎忽略了这一点.如何约束表/表格单元格/ div,使表格的宽度不超过文档的宽度?

(请不要评论使用表的优点.我确实显示表格数据,因此表的使用在语义上是正确的.另外请不要质疑切断文本的用户友好性;那里实际上是一个"扩展"按钮,允许用户查看完整的内容.谢谢!)

(编辑:我也试过max-width,但没有用.)

css

21
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1