td 及内层元素尺寸问题,以及 ellipsis 三个点点效果

作者:vkvi 来源:千一网络(原创) 日期:2021-7-16
<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 指定 widthtable-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-cellinline

半听话”是 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>


相关文章