做form表单的时候，前面经常有姓名，年龄，公司名称等等，有的是2个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：

.test1 {
               text-align:justify;            text-justify:distribute-all-lines;/*ie6-8*/            text-align-last:justify;/* ie9*/            -moz-text-align-last:justify;/*ff*/            -webkit-text-align-last:justify;/*chrome 20+*/        }        @media screen and (-webkit-min-device-pixel-ratio:0){
   /* chrome*/            .test1:after{                content:".";                display: inline-block;                width:100%;                overflow:hidden;                height:0;            }        }

 

DIV可编辑，就是让一个div变成一个类似input输入框的效果。

在div中添加contentEditable="true" 属性就可以了，如下：

 

给input的placeholder设置颜色

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

 

超出长度显示省略号

单行文本显示...

一般要指定宽度，然后给如下四个属性。

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

案例代码：

.haorooms{
   width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

多行文本显示....

主要属性-webkit-line-clamp

p {
       overflow : hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;}

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

p {
       position:relative;    line-height:1.4em;    /* 3 times the line-height to show 3 lines */    height:4.2em;    overflow:hidden;}p::after {
       content:"...";    font-weight:bold;    position:absolute;    bottom:0;    right:0;    padding:0 20px 1px 45px;   // background:url(和网页背景颜色一样的一张背景图) repeat-y;  background-color:#fff;}

注意：

height高度正好是line-height的3倍；结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；要支持IE8，需要将::after替换成:after；