请教一个关于 css 的问题

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

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 上的情况

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

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

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

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