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

多行文本溢出，可是最後一行木有到結尾，以下圖這種例子

解決代碼示例
html:

<div class="model_content">
        <p class="model_text">
            元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上。元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上。元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上能會存在於相同流下的塊級子元素上。元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上元素的「格式化首行」可能會存在於相同流下的塊級子元素上
        </p>
        <span class="model_detail">...<span class="more_detail">更多詳情</span></span>
    </div>

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;
        }
    </style>

效果：

總結：

將...拼在後面，寬度以em（基於父元素font-size）爲單位，至關於遮住底下的文字內容而模擬這種效果，以em爲單位的目的是防止遮住字不是整數個，但願以整字倍數爲寬。

還有其餘方法麼？