V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Pan940425
V2EX  ›  CSS

请教一个关于 css 的问题

  •  
  •   Pan940425 · 2016-08-03 17:04:50 +08:00 · 3112 次点击
    这是一个创建于 2794 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    23 条回复    2016-08-04 17:02:12 +08:00
    suinia
        1
    suinia  
       2016-08-03 17:10:54 +08:00   ❤️ 1
    word-break: break-all;
    Pan940425
        2
    Pan940425  
    OP
       2016-08-03 17:16:06 +08:00
    @suinia 不想要折行,所以用了 overflow:hidden 。。
    abelyao
        3
    abelyao  
       2016-08-03 17:18:10 +08:00
    截图中浏览器的运行效果来看,最后一个 a 是半截的,确实有一部分 hidden 了?
    不然上代码吧
    chairuosen
        4
    chairuosen  
       2016-08-03 17:19:48 +08:00
    span 是 inline 级的,没有宽度属性,设置也不生效,先 display: block or inline-block
    Pan940425
        5
    Pan940425  
    OP
       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
        6
    Pan940425  
    OP
       2016-08-03 17:21:44 +08:00
    @chairuosen 已经加了 display:block 呢,
    Pan940425
        7
    Pan940425  
    OP
       2016-08-03 17:22:24 +08:00
    @abelyao 确实是 hidden 了,但是 td 也被撑开了。。。
    abelyao
        8
    abelyao  
       2016-08-03 17:25:42 +08:00
    @Pan940425 换个思路,给 span 加 width:200px 呢?
    Pan940425
        9
    Pan940425  
    OP
       2016-08-03 17:26:40 +08:00
    @abelyao td 的宽度是要自适应出来的。。
    chairuosen
        10
    chairuosen  
       2016-08-03 17:28:33 +08:00
    @Pan940425 table 单元格宽度比较奇怪,给 table 一个 table-layout:fixed;
    abelyao
        11
    abelyao  
       2016-08-03 17:32:36 +08:00
    @Pan940425 table 的样式中加上 table-layout:fixed;
    learnshare
        12
    learnshare  
       2016-08-03 17:35:07 +08:00
    td 里不要放任何 display: block; 的元素,只放 inline/inline-block 的元素。
    baiyi
        13
    baiyi  
       2016-08-03 17:36:29 +08:00
    貌似是 span 的宽度%没有按照上级 td 的走 要不要换一个思路 用 js 通过 td 的宽度来给 span 一个固定宽呢
    Pan940425
        14
    Pan940425  
    OP
       2016-08-03 17:38:18 +08:00
    @chairuosen
    @abelyao

    貌似加了 table-layout:fixed 也不行。。。
    Pan940425
        15
    Pan940425  
    OP
       2016-08-03 17:41:00 +08:00
    @learnshare 改成了 display:inline-block ,还是会撑开。。
    Pan940425
        16
    Pan940425  
    OP
       2016-08-03 17:42:45 +08:00
    @baiyi 用 js 应该是可以做到,但是因为好多不同的地方都有同样的 span 撑开 td 的问题,想要改动最小,希望可以在每个出问题的 td 上增加一个 class 就行,所以还是希望可以用 css 来解决。。
    abelyao
        17
    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
        18
    abelyao  
       2016-08-03 17:45:31 +08:00
    @Pan940425 噢,发现差别了,我写的时候 table 还加了宽度……
    baiyi
        19
    baiyi  
       2016-08-03 17:46:01 +08:00
    height: 20px;
    word-break: break-all;//强制英文单词断行

    给 span 加上这两个属性
    chairuosen
        20
    chairuosen  
       2016-08-03 17:47:11 +08:00
    @Pan940425 看来我记错了, table-layout 只控制 table 本身,不控制 td 。。。如果非要限制 td 宽度的话, Chrome 上 max-width 是有效的,不清楚 IE 上的情况
    guxin0123
        21
    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
        22
    yangg  
       2016-08-03 19:52:52 +08:00
    table { table-layout:fixed; word-break: break-all; }
    Pan940425
        23
    Pan940425  
    OP
       2016-08-04 17:02:12 +08:00
    @abelyao
    @guxin0123
    @yangg
    谢谢,最后用了 @abelyao 的方法,给 table 加了宽度,然后用了 table-layout:fixed ,
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5360 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 08:02 · PVG 16:02 · LAX 01:02 · JFK 04:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.