table-layout限制宽度——真香

使用了fixed的表格布局，结合width属性来限制表格的宽。text-overflow 属性用于文字过长时显示省略号。

HTML:
<table>
 <tr><td>Ed</td><td>Wood</td></tr>
 <tr><td>Albert</td><td>Schweitzer</td></tr>
 <tr><td>Jane</td><td>Fonda</td></tr>
 <tr><td>William</td><td>Shakespeare</td></tr>
</table>

CSS:
table{
 table-layout: fixed;
 width: 120px;
}
 
td {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis; 
}

RESULT:
| Ed     | Woo... |
| Alb... | SC...  |
| Jane   | Fo...  | 
| Wil..  | Sh...  | 

设置placeholder文字颜色——你不知道的是

<style>
input::-webkit-input-placeholder{
    color:red;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:red;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:red;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color:red;
}
</style>

文本两行显示，超出省略号表示——学起来

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