<style type="text/css"> div { width:100px; } a { width:50%; white-space:nowrap; } </style> <div> <a>文字文字很长的文字文字文字很长的文字文字文字很长的文字</a> </div>
如上,div 的宽度是 100px,而 a 的宽度是 400 多(受文字大小、多少影响),并不是 100px 的 50%,这里 50%,根本没用。
把 a 换成 span 也是一样的。
如果我们把 a 设置成 display:block; div 的宽度是 100px,而 a 的宽度就是 50% 了,即 50px,代码如下:
<style type="text/css"> div { width:100px; } a { display:block; width:50%; white-space:nowrap; } </style> <div> <a>文字文字很长的文字文字文字很长的文字文字文字很长的文字</a> </div>
现在换外层元素,我们将外层元素设置成 td,此时 td、a 宽度都是 400 多,代码如下:
<style type="text/css"> td { width:100px; } a { width:50%; white-space:nowrap; } </style> <table> <tr> <td> <a>文字文字很长的文字文字文字很长的文字文字文字很长的文字</a> </td> </tr> </table>
现在再把 a 设置成 display:block;,此时 td 的宽度是 400 多,a 的宽度虽然是 50%,但是它是 400 多的 50%,并不是 100 的 50%,代码如下:
<style type="text/css"> td { width:100px; } a { display:block; width:50%; white-space:nowrap; } </style> <table> <tr> <td> <a>文字文字很长的文字文字文字很长的文字文字文字很长的文字</a> </td> </tr> </table>
如果我们要控制 td 不被撑大,就需要给 table 指定 width 和 table-layout,注意:两个属性都要指定,代码如下:
table { width:100px; table-layout:fixed; }
总结一下
外 block,内 inline 溢出
外 block 是指定的宽度。外宽度“听话”
内 inline 是溢出后的宽度。内宽度“不听话”
外 block,内 block 溢出
外 block 是指定的宽度。外宽度“听话”
内 block 50% 是外 block 的 50%。内宽度“听话”
外 table-cell,内 inline 溢出
外 table-cell 是内 inline 溢出的宽度。外宽度“不听话”
内 inline 是溢出后的宽度。内宽度“不听话”
外 table-cell,内 block 溢出
外 table-cell 是内 inline 溢出的宽度。外宽度“不听话”
内 block 是外 table-cell 的 50%,注意是 table-cell 最终宽度的 50%,并不是指定宽度的 50%。内宽度算是“半听话”
继续总结
“听话”的都是 block。
“不听话”的都是 table-cell、inline。
“半听话”是 block 位于 table-cell 内时。
继续试验
外 table-cell、中 block、内 inline,结尾怎样?
table-cell、block 均被撑大,重要!
是否指定 DOCTYPE,结果一样。
扩展应用
这就是为什么我们在 td 中使用 text-overflow:ellipsis; 会无效,因为 td 被撑大了(内部的 inline、block 均为撑大之)。
我们知道要实现 ellipsis 效果,需要 4 个属性:
display:block;(如果本身就是,则不需要指定,也可以是 table-cell)
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
还有一个条件,那就是,尺寸在限定范围内。于是我们在 td 中实现时,就需要给 table 指定 2 个属性:
width:xxx;
table-layout:fixed;
完整代码如下:
<style type="text/css"> table { width:100px; table-layout:fixed; } a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } </style> <table> <tr> <td> <a>文字文字很长的文字文字文字很长的文字文字文字很长的文字</a> </td> </tr> </table>
也可以这样写:
<style type="text/css"> table { width:100px; table-layout:fixed; } td { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } </style> <table> <tr> <td> <a>文字文字很长的文字文字文字很长的文字文字文字很长的文字</a> </td> </tr> </table>