文本超长使用css将多出的部分转化成...续

继上次写完下面这个以后文本超长使用css将多出的部分转化成...hover展示全部内容_呐呐呐~854的博客-CSDN博客_css hover 显示全部内容后面我再次遇到一个兼容问题，前天晚上一个小项目要上线，下午才通知测试，然后突然就出现相关的问题，我的中间盒子有个padding-top，但是由于某些原因，这个中间盒子在ios是content-box，在Android是border-box，不可以更改，就导致我的项目在安卓上面展示正常时，在ios上面就会多出半截，如果在ios上面正常，在安卓设备就会少半截。还有在个别机型比如小米12系列上面就完全没有生效。

因为背景色还是个渐变颜色，加上盒子模型的问题，通过伪元素去完成遮盖害怕又要去做兼容性处理。这时候我取消宽度让他自适应并给予margin得到视图位置的同时，将他的高度设置为content-box的高度，并把padding-top取消，让他的line-height等于normal。我本以为万事大吉的时候，最离谱是在iphone13promax和iphone14pormax上面居然再再再次出现了底部露出半截文字的情况。如果只为了这两个机型来专门适配的话实在太过麻烦了，另一边还有ui在和我说视觉上的问题和测试在说一些其他兼容性的问题，所以直接选择暴力的强行更改line-height来完成适应，我将line-heigh调整为1.4以后发现14上面还是会有那么一点点，那就直接将他设置成为1.5。虽然只是暂时完成了视觉效果，但是一点不能打扰项目上线。是个应急的处理方式。

           .goodsInfoDec{                   
                    // width: triplepxvw(321px);
                    height: triplepxvw(102px);
                    font-size: triplepxvw(36px);
                    font-family: PingFang SC;
                    font-weight: normal;
                    color: rgba(34,34,34,1);
                    margin: 0 triplepxvw(12px);
                    overflow: hidden;
                    word-break: break-all;                    
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;                    
                    // line-height: normal;
                    line-height: 1.5;
                    //  line-clamp: 2;
                    // text-overflow: -o-ellipsis-lastline;
                     
                
                }