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

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

Susan Sarandon
發布: 2024-12-12 14:04:09
原創
355 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板