多行文字的垂直居中
解决方案:vertical-align 方法
.box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;vertical-align:middle;display:table-cell;}
效果图:
说明:可以看到,这种方法能够使得单行文字、多行文字都居中。但是因为 table-cell 是 inline 类型,所以会导致原来的块级元素每个 div 一行移动到了同一行。如果需要分列两行,需要在外面额外添加容器对位置进行控制。
设置文字不被鼠标选中
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
文字超出部分显示省略
// 单行文本
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
// 多行文本
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;