移动端文字多行截断的小问题

移动端文字多行截断一般是用以下方法

display: -webkit-box;
overflow: hidden;  
-webkit-line-clamp:2;
-webkit-box-orient: vertical;

现在有一个需求是实现这样的一个情况

文字最多两行，超出部分截断，前面会有一个引号，需要两行文字部分对齐

方法1

<div className="App">      
    <span className="param1">“</span>      
    <span className="param3">        
        第三段一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十
    </span>    
</div>

.param1 {  
    padding: 0 2px;  
}
.param3 { 
    max-width: 300px;  
    display: -webkit-box;  
    overflow: hidden;    
    -webkit-line-clamp:2;  
    -webkit-box-orient: vertical;
}

首先因为文字部分的display已经为-webkit-box，所以文字部分会占据一行，使得引号和文字不在统一行，也不能再使用display:inline-block让它们处在同一行，效果是这样的

于是我考虑把引号用absolute定位来写

.App {  position: relative;}
.param1 {  
    position: absolute;
    top: 0;    left: 0; }
.param3 {  
    padding-left: 8px;  
    max-width: 300px;  
    display: -webkit-box;  
    overflow: hidden;    
    -webkit-line-clamp:2;  
    -webkit-box-orient: vertical;
}

这样基本效果是可以实现了，但是兼容性测试的时候我发现草率了，我在params3里面给引号留出的距离是固定的，但是在不同机型中，这个引号占据的长度并不是相同的，就会出现引号覆盖文字的现象，也就是这个样子

方法2

然后呢，我就考虑得换种思路了，于是我发现给父容器使用flex定位可以较好的解决这个问题

<div className="App"> 
    <span className="param">“</span>
    <span className="param param3">
        第三段一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十
    </span> 
</div>

.App {  
    display: flex; 
    width: 300px;
}
.param {  
    padding: 0 2px;
}
.param3 {  
    display: -webkit-box;  
    overflow: hidden;    
    -webkit-line-clamp:2;  
    -webkit-box-orient: vertical;
}

这样后面部分的长度和位置会根据前面文字的宽度进行调整，就不会出现之前的问题啦～