移动端项目-特殊处理

一、文本溢出处理(省略号）

（1）单行文本（适用于块级、内联块）（会写）

在文字样式中设置

width：设定宽度；

white-space:nowrap;（不让文本换行）

overflow:hidden;（不显示溢出文本）

text-overflow:ellipsis;（文本溢出是显示省略号）

（2）多行文本

1、Webkit内核实现多行溢出处理

width：设定宽度；

height:设定高度；

overflow:hidden;（不显示溢出文本）

text-overflow:ellipsis;（文本溢出是显示省略号）

display:-webkit-box;（形成webkit特有的伸缩盒）

-webkit-line-clamp:3;（设置文本行数，webkit独有）

-webkit-box-orient:vertical；（设置文本排列方式，伸缩盒的特性）

（3）自定义

实现,text多行文本溢出处理

                                        .text{

                                                   height:字体大小的倍数（行数）;

                                                    width:设定宽度；

                                                   overflow:hidden;

                                                   font-size:字体大小；

                                                   line-height:字体大小的值;

                                                   position:relative;

                                                 }

                                                   .text:after{

                                                   content:"...";

                                                   position:absolute;

                                                   right:0;

                                                   bottom:0;

                                                   background-color:父元素背景颜色;（也可以写从透明到背景颜色                                                       的渐变）

                                               }

二、移动端的兼容

-webkit-appearance:none(表单输入框有内阴影)

-webkit-tap-highlight-color:rgba(255, 255, 255, 0);

height: 50px;（阴影一闪一闪的感觉）