文本多行溢出顯示...之最后一行不到行尾的解決

YPHP 發布于2019-08-29 17:25 / 2741人閱讀

摘要：多行文本溢出，但是最后一行木有到結尾，如下圖這種例子解決代碼示例元素的格式化首行可能會存在于相同流下的塊級子元素上元素的格式化首行可能會存在于相同流下的塊級子元素上。

多行文本溢出，但是最后一行木有到結尾，如下圖這種例子

解決代碼示例
html:

    
        
            元素的“格式化首行”可能會存在于相同流下的塊級子元素上元素的“格式化首行”可能會存在于相同流下的塊級子元素上。元素的“格式化首行”可能會存在于相同流下的塊級子元素上元素的“格式化首行”可能會存在于相同流下的塊級子元素上元素的“格式化首行”可能會存在于相同流下的塊級子元素上。元素的“格式化首行”可能會存在于相同流下的塊級子元素上元素的“格式化首行”可能會存在于相同流下的塊級子元素上元素的“格式化首行”可能會存在于相同流下的塊級子元素上元素的“格式化首行”可能會存在于相同流下的塊級子元素上能會存在于相同流下的塊級子元素上。元素的“格式化首行”可能會存在于相同流下的塊級子元素上元素的“格式化首行”可能會存在于相同流下的塊級子元素上元素的“格式化首行”可能會存在于相同流下的塊級子元素上元素的“格式化首行”可能會存在于相同流下的塊級子元素上
        
        ...更多詳情

css:

        * {
            margin: 0;
            padding: 0;
        }

        .model_content {
            padding: 0 30px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .model_text {
            font-size: 14px;
            color: #657180;
            text-align: justify;
            line-height: 24px;
        }

        .model_detail {
            width: 5em;
            position: absolute;
            right: 30px;
            bottom: 0;
            background: #fff;
            font-size: 14px;
            color: #657180;
        }

        .more_detail {
            position: absolute;
            right: 0;
            color: #4876f1;
            margin-left: 5px;
        }

效果：

總結：

將...拼在后面，寬度以em（基于父元素font-size）為單位，相當于遮住底下的文字內容而模擬這種效果，以em為單位的目的是防止遮住字不是整數個，希望以整字倍數為寬。

還有其他方法么？

云服務器 GPU云服務器多行合成一行多行轉一行 linux輸出最后一行數據 linux 打印最后一行數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114316.html

flex基礎布局詳解

摘要：系統性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 flex-tutorials 系統性的介紹關于flex布局，也作為自學的一篇文章 flex基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

nemo 2019-08-30 15:53 評論0 收藏0
flex基礎布局詳解

摘要：系統性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 flex-tutorials 系統性的介紹關于flex布局，也作為自學的一篇文章 flex基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

luodongseu 2019-08-01 16:29 評論0 收藏0
vim編輯器技巧備忘（初級-中級）

摘要：相反，不顯示行號設置為粘貼模式，解決粘貼時縮進錯亂問題。會自動加入創建從當前行起至以下行的折疊標記，進行折疊。中的標記都有一個名字，這個名字用單一的字符表示。學習vim并且其會成為你最后一個使用的文本編輯器學習建議：丟棄鼠標和小鍵盤具有搭配使用各種按鍵的意識首先來一張 mindmap : showImg(http://sean-images.qiniudn.com/V...

187J3X1 2019-06-28 10:11 評論0 收藏0