iT邦幫忙

1

詢問html或css可以如何設定若字串超過百分比則隱藏(使用<table>)

  • 分享至 

  • xImage

如標題,假設我有一個表格,使用百分比定義寬度,表格中的字串(Test)後面會接數個點(.),因此勢必會超過欄位定義的百分比寬度,我希望超過的部份可以自動隱藏,而不要異動表格定義的百分比寬度,目前嘗試許多語法,但實作起來仍會有此問題,想詢問該怎麼調整呢?

如下圖,圖一為正常表格寬度;
圖二若存在長度超過表格定義的字串後,會將此表格欄位拉寬
https://ithelp.ithome.com.tw/upload/images/20200221/201153367H9rI5r2Tm.png

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
dragonH
iT邦超人 5 級 ‧ 2020-02-21 18:50:34
最佳解答

這樣嗎

codepen

參考

看更多先前的回應...收起先前的回應...
froce iT邦大師 1 級 ‧ 2020-02-21 19:06:14 檢舉
dragonH iT邦超人 5 級 ‧ 2020-02-21 19:08:58 檢舉

/images/emoticon/emoticon37.gif

anniecat iT邦新手 3 級 ‧ 2020-03-02 10:42:18 檢舉

先謝謝兩位的協助,不好意思上週太忙了現在才回復您們 > <
然後這幾天有嘗試參考兩位的方法:
使用dragonH實作結果,發現超過的字串會換行呈現,而不是直接隱蔽;
使用froce實做結果,發現他的百分比寬度會不作用。
目前看了很多屬性方法確實也是這樣實作,但我實作的結果看起來沒有讓這個方法有作用,請問我還可以怎麼調整呢?

dragonH iT邦超人 5 級 ‧ 2020-03-02 11:35:05 檢舉

anniecat

我的 code 沒問題唷

Imgur

codepen

先從我們給你的 code 改起吧

因為我看到你連最重要的 table-layout: fixed 都沒加

anniecat iT邦新手 3 級 ‧ 2020-03-03 16:13:50 檢舉

dragonH ,很謝謝你的幫忙,不過因為我發現使用屬性table-layout: fixed會使百分比失效,因此,才先將此屬行移除,但加上去之後,仍會有百分比失效的問題,不清楚是否為瀏覽器問題...我再嘗試看看有沒有其他方法!
此圖是我使用chrome瀏覽器觀看的樣子,看起來被均分為一半了 :
https://ithelp.ithome.com.tw/upload/images/20200303/20115336rwapXMXr3W.png

anniecat iT邦新手 3 級 ‧ 2020-03-03 16:58:27 檢舉

但是我確定這部分的屬性是對的,看起來應該是瀏覽器的問題,謝謝幫忙!

dragonH iT邦超人 5 級 ‧ 2020-03-03 17:04:55 檢舉

可是我也是 chrome 餒 XD

或許有特殊的需求

可以考慮用 div 來呈現

anniecat iT邦新手 3 級 ‧ 2020-03-03 17:17:04 檢舉

好的~謝謝你的幫忙~有嘗試div的版本確定可以實作!

anniecat iT邦新手 3 級 ‧ 2020-03-04 10:05:33 檢舉

補上後來實做成功的結果

dragonH iT邦超人 5 級 ‧ 2020-03-04 10:11:08 檢舉

/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答