首頁 >web前端 >css教學 >為什麼 `overflow:hidden` 不能作用在 `` 元素來截斷文字?

為什麼 `overflow:hidden` 不能作用在 `` 元素來截斷文字?

Susan Sarandon
Susan Sarandon原創
2024-12-12 14:04:09355瀏覽

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

溢位隱藏在中無效?

問題:
A

原本具有固定寬度的單元格會溢位多餘的文本,從而擴大單元格邊界。

解決方案:
要在單元格內強製文字截斷,需要組合 CSS 屬性。

  1. 表格版面:已修正

    • 確保表格寬​​度保持靜態。
  2. 溢位:在 🎜>

      隱藏溢流.
    隱藏溢流>
  3. white-space: nowrap on

    • 防止文字在cell.
  4. 範例(固定寬度列):

    範例(固定寬度列):


    範例(固定寬度列):


    範例(固定寬度列):


    範例(固定寬度列):


    範例(固定寬度列):


    範例(固定寬度欄)

    框大小: border-box;</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>表格{

    表格佈局:固定;
    邊框折疊:折疊;
    寬度: 100%;

    最大寬度:100px;<🎜 >}<🎜>td {<🎜>背景:#F00;<🎜>填充: 20px;<🎜> 溢位:隱藏;<🎜> 空白:nowrap;<🎜> 寬度:100px;<🎜> 邊框:實心1px #000;<🎜> }<🎜>
     <tbody><🎜><🎜><🎜></tbody><🎜></table>
    <🎜>
    <🎜>">

以上是為什麼 `overflow:hidden` 不能作用在 `` 元素來截斷文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:CSS 中的 px 與 rem:我應該使用哪個單位來實現一致的佈局?下一篇:CSS 中的 px 與 rem:我應該使用哪個單位來實現一致的佈局?

相關文章

看更多