首頁 > web前端 > css教學 > 為什麼省略號沒有出現在我的表格儲存格中?

為什麼省略號沒有出現在我的表格儲存格中?

Susan Sarandon
發布: 2024-11-04 22:59:02
原創
894 人瀏覽過

Why Isn't Ellipsis Appearing in My Table Cells?

省略號未出現在表格單元格中

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

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