首页 > web前端 > css教程 > 为什么 `overflow:hidden` 不能作用于 `` 元素来截断文本?

为什么 `overflow:hidden` 不能作用于 `` 元素来截断文本?

Susan Sarandon
发布: 2024-12-12 14:04:09
原创
343 人浏览过

Why Doesn't `overflow: hidden` Work on a `` Element to Truncate Text?

溢出隐藏在中无效?

问题:
A

原本具有固定宽度的单元格会溢出多余的文本,从而扩大单元格边界。

解决方案:
要在单元格内强制文本截断,需要组合 CSS 属性。

  1. 表格布局:已修复

    • 确保表格宽度保持静态。
  2. 溢出:在 🎜>

      隐藏溢出text.
  3. white-space: nowrap on

      防止文本在cell.
  4. 示例(固定宽度列):

    框大小: border-box;<br>}<br>表格 {<br> 表格布局:固定;<br> 边框折叠:折叠;<br> 宽度:100%;<br> 最大宽度:100px;<br>}<br>td {<br>背景:#F00;<br>填充: 20px;<br> 溢出:隐藏;<br> 空白:nowrap;<br> 宽度:100px;<br> 边框:实心 1px #000;<br>}
     <tbody><br></p><pre class="brush:php;toolbar:false"><tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>



    ">

以上是为什么 `overflow:hidden` 不能作用于 `` 元素来截断文本?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板