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

YPHP 发布于2019-08-29 17:25 / 2612人阅读

摘要：多行文本溢出，但是最后一行木有到结尾，如下图这种例子解决代码示例元素的格式化首行可能会存在于相同流下的块级子元素上元素的格式化首行可能会存在于相同流下的块级子元素上。

多行文本溢出，但是最后一行木有到结尾，如下图这种例子

解决代码示例
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 打印最后一行数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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