需求：

如圖：第三行文末需要展示省略號，并且有查看更多按鈕，切換顯示隱藏。

常規css處理方法：

控制文字行數：

// 多行顯示
.text_morerow {
? ? overflow: hidden;
? ? display: -webkit-box;
? ? -webkit-line-clamp: 2; // 控制顯示行數
? ? -webkit-box-orient: vertical;
? ? word-break: break-all;?
}

如果僅僅這么設置，效果是這樣：

但是我們還有一個查看更多的按鈕來控制內容顯隱，要如何實現呢，現在我們有一種新思路，

html部分：

<p class="35f6-2014-ff67-74fb text-spread-container">
    <p class="2014-ff67-74fb-4385 text">我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字</p>
    <p class="0088-83eb-e302-e654 btn">...查看更多</p>
</p>

父元素固定容器：

.text-spread-container {
position: relative;
overflow: hidden;
max-height:100px;
}

子元素文字容器：

.text{
color: #1f1f1f;
line-height: 0.22rem;
}

查看更多按鈕CSS:

.btn?{
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
background-color: #fff;
}

利用偽類視覺看起來有漸變淡出效果

.btn:before?{
position: absolute;
right: 100%;
content: "";
width:0.16rem;
height:0.22rem;
background-image: linear-gradient(270deg,#fff,hsla(0,0%,100%,0));
}

我們可以通過判斷.text元素的高度 是否大于父元素的max-height 100px 來控制查看更多按鈕的顯隱，當點擊查看更多切換時，父元素高度改為和子元素通高，或者去除/添加overflow-hidden屬性即可。

到此這篇關于CSS處理文字段落尾行行末縮進，點擊查看更多展開效果的文章就介紹到這了,更多相關css行末縮進內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的CSS处理文字段落尾行行末缩进，点击查看更多展开效果(css字符)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。