iT邦幫忙

0

如何透過 CSS 限制顯示內容的多寡

AWEI 2021-05-06 01:12:311544 瀏覽
  • 分享至 

  • xImage

大家好,最近在專案上遇到一個問題感到很困擾不知道該怎麼實作會比較好!
因為我的 JS 比較弱無法透過 JS 去實現此功能,於是想看看能否透過 CSS 去解決~

問題
今天有一個區塊,要顯示熱門搜尋的關鍵字!
但那個區塊的寬度是固定的,比方說寬 300px 會根據後端撈到的熱門關鍵字,如果關鍵字的字數少有可能這區就會顯示五筆熱門關鍵字(因為空間夠放)
但如果今天熱門關鍵字,字數很多那這區就只會顯示2筆資料(因為空間不夠放)
也就是說在區塊寬度固定的情況下,根據資料字的長度來顯示要放幾筆資料進來。

https://ithelp.ithome.com.tw/upload/images/20210506/20129439AgQVykIbW2.jpg

我自己是有做了一些 CSS 的嘗試,但我試著增加 li 的資料,結果就是爆掉跑版,不知道這邊有沒有人遇過類似的需求,該如何解決呢?

希望有高手能解惑,在此先謝謝大家觀看我的問題,感恩。

我的嘗試練習

試試bootstrap.js吧
AWEI iT邦新手 4 級 ‧ 2021-05-06 23:24:58 檢舉
也是個方式,謝謝你
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
DanSnow
iT邦好手 1 級 ‧ 2021-05-06 11:56:27

如果你裡面每個關鍵字都是一個 html 的 node 的話,其實你就在上層的 node ,高度設定成字的高度,再用 display: flexflex-wrap: wrap ,接著再加上 overflow: hidden 的話,多的資料會被移到第二行,並且隱藏起來了,寫成 code 就像:

.parent {
  // 要限制的寬度
  width: 16rem;
  // 字的高度
  height: 1rem;
  
  // 開始讓多的部份隱藏
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

這樣做多的部份就會被移到第二行,並且被 overflow: hidden 隱藏

這邊有 demo ,不過裡面是用 tailwindcss ,這樣我比較方便

AWEI iT邦新手 4 級 ‧ 2021-05-06 23:28:27 檢舉

謝謝你的幫忙~/images/emoticon/emoticon41.gif
最後我也做了點嘗試,結果如下!
也分享給你,一起成長
https://codepen.io/hong-wei/pen/yLMLZja?editors=1100

DanSnow iT邦好手 1 級 ‧ 2021-05-07 00:13:26 檢舉

好久沒聽到有人跟我講這句話了,謝謝你啊

AWEI iT邦新手 4 級 ‧ 2021-05-08 15:32:26 檢舉

咦!好奇哪一句話??哈哈

我要發表回答

立即登入回答