iT邦幫忙

0

HTML 內文縮行問題

  • 分享至 

  • xImage

開發上遇到這樣的需求:只顯示兩行,如果超過兩行,則顯示一個“顯示更多”的按鈕,點擊按鈕來顯示剩餘行的內容。

這邊有找到一種作法,用css去控制把它斷在第二行,但這樣按鈕部沒辦法放置在第二後最後面

想請教各位大大不知道有沒有辦法解決或是有其他方法呢?

預期效果


HTML

<div class="bText">
我們希望藉由自創品牌來帶給我們會員更高的品質和更合理的價格。我們希望藉由自創品牌來帶給我們會員更高的品質和更合理的價格。我們希望藉由自創品牌來帶給我們會員更高的品質和更合理的價格。我們希望藉由自創品牌來帶給我們會員更高的品質和更合理的價格。我們希望藉由自創品牌來帶給我們會員更高的品質和更合理的價格。
<button>更多內容</button>
</div>

CSS

.bText{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2020-02-11 19:11:31 檢舉
https://stackoverflow.com/questions/51773101/insert-read-more-button-when-line-clamping/51773254
套件ㄅQQ
froce iT邦大師 1 級 ‧ 2020-02-12 07:17:42 檢舉
樓上,只會用套件不會進步喔
s041517 iT邦新手 5 級 ‧ 2020-02-21 15:31:46 檢舉
不用js的話,
簡單一點,一樣做2行就"..."
按鈕壓在文字之上z-index之類
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
2
舜~
iT邦高手 1 級 ‧ 2020-02-12 08:10:44

把您那串"更多內容"的按鈕或超連結用**定位(position)**的方式固定在容器的右下角即可

0
johnnyjong823
iT邦新手 4 級 ‧ 2020-02-12 09:39:30

參考:https://www.itread01.com/content/1549845724.html

我把他實做後,稍微改一下應該是你要的功能↓
https://codepen.io/johnnyjong823/pen/OJVyNwB

強尼

看更多先前的回應...收起先前的回應...
hugo8319 iT邦新手 4 級 ‧ 2020-02-12 09:55:18 檢舉

這個有辦法讓他的按鈕也在第二行嗎

https://codepen.io/johnnyjong823/pen/OJVyNwB

只能幫你到這,剩下自己改改看吧,可以把我這個複製去改

willlai iT邦新手 5 級 ‧ 2020-02-26 17:29:27 檢舉

強尼大

請問一下,如果我希望下面的區塊.aa能夠在展開的時候被往下推的話,改怎麼修改呢?

https://codepen.io/willlai/pen/vYOxJBK

感謝你

willlai iT邦新手 5 級 ‧ 2020-02-27 12:42:01 檢舉

謝謝你~太棒了~高手~這很實用

0
majo2013
iT邦新手 4 級 ‧ 2020-02-13 15:52:47

我用了邪道硬做出來
純 css
但… 不建議你真的這樣用:

  • 受限於: .bText 底色單純
  • 缺點: 文字可能會被切地很怪

https://jsfiddle.net/MajoFeeChiou/06hoLquj/86/

我要發表回答

立即登入回答