iT邦幫忙

0

如何使用 CSS 達成限制文字最多呈現兩行,但是又要拿掉省略符號。

AWEI 2021-05-01 16:41:342429 瀏覽
  • 分享至 

  • xImage

大家好,目前我正在研究如果今天文字很多但我不希望因為這樣導致在畫面上呈現很多行,最多就出現兩行就好,我使用了這個語法

span{
  display: block;
  letter-spacing:0;
  line-height:20px;
  overflow:hidden;
  text-overflow:clip;
  display:-webkit-box;
  -webkit-box-orient:vertical;  
  -webkit-line-clamp:2;  
}

但是使用了 text-overflow:clip; 我以為就不會出現點點點符號,確實有限制在兩行就不會顯示,但現在苦惱於該怎麼把...符號替換成空白不呈現任何符號呢?
這個是我自己嘗試的網址

已經試過很多方式了,但是效果依然不如預期。
就像我有用 jquery 去看能否達成效果,但是想到的是去抓字元超出字元就在後面補一個空白,但這有個問題在桌機版是這個字元數沒錯,但是到 RWD 時(手機版)就不會只呈現兩行,有可能出現四~五行才會隱藏後面的字,為此苦惱好幾天!
決定上來問問是否其他大大有其他方式呢?

我使用 jquery 的嘗試

在此先謝謝大家觀看我的問題。

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

1 個回答

2
通靈亡
iT邦高手 1 級 ‧ 2021-05-01 19:15:48

指定容器高度,並設定內容的行高度為容器高度的一半,在容器設定 overflow: hidden;
https://codepen.io/ted59438/pen/poRXKWp

span {
  display: block;
  height: 2em;
  line-height: 1em;
  letter-spacing: 0;
  overflow: hidden;
}
AWEI iT邦新手 4 級 ‧ 2021-05-02 17:28:39 檢舉

謝謝你的幫忙,總於找到適合的方法了!感恩/images/emoticon/emoticon51.gif

我要發表回答

立即登入回答