大家好,目前我正在研究如果今天文字很多但我不希望因為這樣導致在畫面上呈現很多行,最多就出現兩行就好,我使用了這個語法
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 時(手機版)就不會只呈現兩行,有可能出現四~五行才會隱藏後面的字,為此苦惱好幾天!
決定上來問問是否其他大大有其他方式呢?
在此先謝謝大家觀看我的問題。
指定容器高度,並設定內容的行高度為容器高度的一半,在容器設定 overflow: hidden;
https://codepen.io/ted59438/pen/poRXKWp
span {
display: block;
height: 2em;
line-height: 1em;
letter-spacing: 0;
overflow: hidden;
}