请教一个关于 css 的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 3013 天前的主题，其中的信息可能已经有所发展或是发生改变。

我在一个固定宽度的 td 里面放了一个 span ，然后 span 设置了一个百分比宽度以及 overflow:hidden 。不知道为什么， td 会被撑开。。如图我不想让 span 把 td 撑开需要怎么做呢。。。

span

撑开

宽度

Overflow

23 条回复 • 2016-08-04 17:02:12 +08:00

suinia

2016-08-03 17:10:54 +08:00

word-break: break-all;

Pan940425

2016-08-03 17:16:06 +08:00

@suinia 不想要折行，所以用了 overflow:hidden 。。

abelyao

2016-08-03 17:18:10 +08:00

截图中浏览器的运行效果来看，最后一个 a 是半截的，确实有一部分 hidden 了？
不然上代码吧

chairuosen

2016-08-03 17:19:48 +08:00

span 是 inline 级的，没有宽度属性，设置也不生效，先 display: block or inline-block

Pan940425

2016-08-03 17:21:14 +08:00

@abelyao
@chairuosen
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td style="width:200px;border:1px solid">
<span style="width:80%;display:inline-block;overflow:hidden;margin-left:10%;">11111111111111111111111111111111111111111111111111111111111111111111111</span>
</td>
</tr>
</table>
</body>
</html>

Pan940425

2016-08-03 17:21:44 +08:00

@chairuosen 已经加了 display:block 呢，

Pan940425

2016-08-03 17:22:24 +08:00

@abelyao 确实是 hidden 了，但是 td 也被撑开了。。。

abelyao

2016-08-03 17:25:42 +08:00

@Pan940425 换个思路，给 span 加 width:200px 呢？

Pan940425

2016-08-03 17:26:40 +08:00

@abelyao td 的宽度是要自适应出来的。。

chairuosen

2016-08-03 17:28:33 +08:00

@Pan940425 table 单元格宽度比较奇怪，给 table 一个 table-layout:fixed;

abelyao

2016-08-03 17:32:36 +08:00

@Pan940425 table 的样式中加上 table-layout:fixed;

learnshare

2016-08-03 17:35:07 +08:00

td 里不要放任何 display: block; 的元素，只放 inline/inline-block 的元素。

baiyi

2016-08-03 17:36:29 +08:00

貌似是 span 的宽度%没有按照上级 td 的走要不要换一个思路用 js 通过 td 的宽度来给 span 一个固定宽呢

Pan940425

2016-08-03 17:38:18 +08:00

@chairuosen
@abelyao

貌似加了 table-layout:fixed 也不行。。。

Pan940425

2016-08-03 17:41:00 +08:00

@learnshare 改成了 display:inline-block ，还是会撑开。。

Pan940425

2016-08-03 17:42:45 +08:00

@baiyi 用 js 应该是可以做到，但是因为好多不同的地方都有同样的 span 撑开 td 的问题，想要改动最小，希望可以在每个出问题的 td 上增加一个 class 就行，所以还是希望可以用 css 来解决。。

abelyao

2016-08-03 17:44:31 +08:00

@Pan940425 我是这么测试的：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table style="width:200px;table-layout:fixed;">
<tr>
<td style="width:200px;">
<span style="display:block; overflow:hidden; width:80%; margin-left:10%;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</td>
</tr>
</table>
</body>
</html>

abelyao

2016-08-03 17:45:31 +08:00

@Pan940425 噢，发现差别了，我写的时候 table 还加了宽度……

baiyi

2016-08-03 17:46:01 +08:00

height: 20px;
word-break: break-all;//强制英文单词断行

给 span 加上这两个属性

chairuosen

2016-08-03 17:47:11 +08:00

@Pan940425 看来我记错了， table-layout 只控制 table 本身，不控制 td 。。。如果非要限制 td 宽度的话， Chrome 上 max-width 是有效的，不清楚 IE 上的情况

guxin0123

2016-08-03 19:14:47 +08:00

table-layout :fixed 是只计算首行的列宽并根据其固定所有列宽
可以在第一个 tr 里面的 td 给宽度如果第一行都是不固定的话
可以这样
<table style="table-layout:fixed">
<colgroup>
<col style="width:60%">
<col style="width:20%">
<col style="width:20%">
</colgroup>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
</table>

yangg

2016-08-03 19:52:52 +08:00

table { table-layout:fixed; word-break: break-all; }

Pan940425

2016-08-04 17:02:12 +08:00

@abelyao
@guxin0123
@yangg
谢谢，最后用了 @abelyao 的方法，给 table 加了宽度，然后用了 table-layout:fixed ，