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

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

Susan Sarandon
Susan Sarandon原创
2024-12-12 14:04:09348浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:px vs. rem in CSS: Which Unit Should I Use for Consistent Layouts?下一篇:How can I dynamically equalize the heights of card headers that are not direct children of their parent container using CSS or jQuery?

相关文章

查看更多