CSS常用样式-持续更新

原文链接: http://www.cnblogs.com/peng-zhang/p/9854592.html

1.溢出文本显示省略号

单行:
.single-line{
-o-text-overflow : ellipsis; /*兼容opera*/
text-overflow : ellipsis ; /*这就是省略号*/        
overflow : hidden ; /*设置超过的隐藏*/
white-space : nowrap ; /*设置不折行*/
}
多行:
css3新增text-overflow:ellipse;只支持单行文本
如果是多行文本,在无法完全显示的情况下,可以按下面这样写:
.multi-line{
overflow : hidden ;/*设置超过的隐藏*/
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

2.TextBox取消拖拽

.cancel-drag{
    resize:none;
}

 3.div变成可编辑状态

4.div禁止选择功能

<div unselectable="on" onselectstart="return false">
      这里面的内容都是不能复制的呦!
div>

5.给input的placeholder设置颜色

Html:

<input class="inp" type="text" placeholder="输入内容"/>

CSS:

/* WebKit browsers */
.inp::-webkit-input-placeholder { 
    color: red;
}
/* Mozilla Firefox 4 to 18 */
.inp:-moz-placeholder { 
    color: red;
}
/* Mozilla Firefox 19+ */
.inp::-moz-placeholder { 
    color: red;
}
/* Internet Explorer 10+ */
.inp:-ms-input-placeholder { 
    color: red;
}

 6.空格显示完整

在html中,文字之间如果存在多个空格,默认只显示一个空格位置,想要显示完整的空格,使用下面的样式。

.show-all-blank{
      white-space: pre;
}

 

转载于:https://www.cnblogs.com/peng-zhang/p/9854592.html

你可能感兴趣的:(CSS常用样式-持续更新)