省略號未出現在表格單元格中
在給定的HTML 表格中,當單元格內的文本超出其定義時,通常應出現省略號寬度。但是,提供的範例中的文字並未按預期截斷。
調查問題
檢查輸出時,單元格寬度會報告為 139 像素,表示內容應比指定的 50px 寬。檢查 CSS 樣式,我們注意到以下設定:
<code class="css">td { border: 1px solid black; width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }</code>
省略號的所有必需屬性似乎都存在。那麼,為什麼它不起作用?
解決方案1:顯示:塊
一個解決方案是將以下屬性添加到CSS:
<code class="css">td { display: block; }</code>
這明確地添加到CSS:
這明確地將表格單元格的顯示類型設為區塊級,使它們表現得像獨立容器一樣,並啟用
解決方案2:表格佈局和寬度
<code class="css">table { table-layout: fixed; width: 200px; }</code>
另一種方法是設定table-layout:fixed;為表格,以及定義寬度:
這會強製表格具有固定佈局並明確設定其寬度,防止內容寬度可能影響單元格寬度計算的問題。以上是為什麼省略號沒有出現在我的表格儲存格中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!