V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
checgg
V2EX  ›  问与答

请问某些字符撑大 table 的 td 怎么处理?

  •  
  •   checgg · 2018-08-28 10:41:37 +08:00 · 1934 次点击
    这是一个创建于 2264 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <table style="width: 100px;border: solid 1px;">
            <tr>
                <td style="height: 30px;width: 100px;">呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</td>
                <!-- <td style="height: 30px;width: 100px;">呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</td> -->
            </tr>
        </table>
    </body>
    </html>
    

    结果:

    图片 图片

    问题: 如果是打开注释的地方,td 会被撑开。请问怎么处理呢?

    要求:

    1 宽度 100px 不能撑开

    2 可以是多行,但是文字内容要显示全

    15 条回复    2018-08-29 09:48:10 +08:00
    TomatoYuyuko
        1
    TomatoYuyuko  
       2018-08-28 10:50:59 +08:00
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    在设置 td 的 title,想看全 hover 一下或者做成点击弹出层显示全部内容。这样最美观
    checgg
        2
    checgg  
    OP
       2018-08-28 10:54:23 +08:00
    @TomatoYuyuko 不能 hidden。
    如果业务需要这个东西打印出来呢。。。。
    chinvo
        3
    chinvo  
       2018-08-28 10:55:50 +08:00
    @checgg 换行或者缩小字号喽

    你又不换行,你又不缩小字号,你还不让隐藏,我很难做呐(撩衣服亮菜刀
    gzf6
        4
    gzf6  
       2018-08-28 11:08:46 +08:00
    table { table-layout: fixed }
    TomatoYuyuko
        5
    TomatoYuyuko  
       2018-08-28 11:11:41 +08:00
    @checgg 如果是点击按钮执行打印的话,就调底层再去生成一张表,别用前端这张 table,底层打印出来的表可以随便一点显示,不用顾忌溢出换行之类的。
    如果是直接打印整个 web 页面那没办法了,丑就丑点吧,,,
    murmur
        6
    murmur  
       2018-08-28 11:12:14 +08:00
    table 不适合布局
    自适应太迷幻
    要么里面放 div 写死宽度
    要么用 flex 这种高档东西
    Sparetire
        7
    Sparetire  
       2018-08-28 14:36:23 +08:00 via Android
    4 楼正解
    checgg
        8
    checgg  
    OP
       2018-08-28 17:00:03 +08:00
    @gzf6
    @Sparetire
    fixed '。。。。' 会到表格外面去。
    rabbbit
        9
    rabbbit  
       2018-08-28 18:31:57 +08:00
    有倒是有办法,就是量字符长度,然后加<br>.

    或者让后端处理下?
    Sparetire
        10
    Sparetire  
       2018-08-28 19:52:07 +08:00 via Android
    @checgg 当然会到外面去,但这符合解决你说的 td 撑开的问题的要求,至于内容会溢出,这又是另一个问题了,需要另外的解决手段
    loy6491
        11
    loy6491  
       2018-08-28 20:17:48 +08:00 via iPhone
    word-break: break-all

    是想找这个嘛
    brickyang
        12
    brickyang  
       2018-08-28 22:24:10 +08:00 via iPhone
    @checgg 打印使用另一套 CSS
    azh7138m
        13
    azh7138m  
       2018-08-28 22:48:57 +08:00
    gzf6
        14
    gzf6  
       2018-08-28 22:50:38 +08:00
    @checgg 宽度固定,高度不能固定,文本格式的换行也要设置
    checgg
        15
    checgg  
    OP
       2018-08-29 09:48:10 +08:00
    @azh7138m 👍
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4340 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 10:07 · PVG 18:07 · LAX 02:07 · JFK 05:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.