常用css整理

整理一些日常开发中常用css

1、换行

word-break:break-all; // 允许单词内换行，当然也包括数字
word-wrap:break-word；// 允许换行，不会把单词截断掉的

2、CSS实现单行、多行文本溢出显示省略号

• 单行 （使text-overflow:ellipsis属性）

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

• 多行

display: -webkit-box;//webkit-line-clamp必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;//webkit-line-clamp必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; //用来限制在一个块元素显示的文本的行数。
overflow: hidden;

3、 解决ios端按钮和输入框自带圆角的问题

border-radius: 0;//解决ios上输入框圆角问题

4、 css实现小三角

• html

<div class="arrow_up"></div>

• css

.arrow_up:before {
    content: ''; /*伪类下的属性*/
    display:block;
    position:absolute;
    top:0px;
    left:150px;
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     //虽然宽高度为0, 但在IE6下会具有默认的 
    line-height: 0;  // 字体大小和行高, 导致盒子呈现被撑开的长矩形 
    border:10px;
    border-style:dashed dashed solid dashed; // IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果
    border-color:transparent transparent  #f30  transparent; 
}

未完待续。。。