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

2018-08-28 10:41:37 +08:00
 checgg
<!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 可以是多行，但是文字内容要显示全

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

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

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

是想找这个嘛
brickyang
2018-08-28 22:24:10 +08:00
@checgg 打印使用另一套 CSS
azh7138m
2018-08-28 22:48:57 +08:00
@loy6491 是 break-word 啦

https://codepen.io/anon/pen/rZLZrK
gzf6
2018-08-28 22:50:38 +08:00
@checgg 宽度固定，高度不能固定，文本格式的换行也要设置
checgg
2018-08-29 09:48:10 +08:00
@azh7138m 👍

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/483866

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX