文字显示

文本溢出部分展示

换行设置

white-space: nowrap; // 文本不进行换行

溢出部分可见性设置

overflow: hidden; // 溢出元素框外内容不可见
overflow: scroll; // 溢出元素框外隐藏但滚动可见，且显示滚动条
overflow: visible; // 默认值，溢出元素框外内容不隐藏

text-overflow: ellipsis; // 溢出部分用省略号表示

对于块容器中文本最多显示行数，可以使用-webkit-line-clamp属性进行设置，但是，使用该属性存在一定前提：

display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

完成以上设置以后，再设置最多显示行数如：

-webkit-line-clamp: 2; // 最多展示行数

例子

展示单行，溢出部分省略号展示

展示多行，设置最多展示行数，溢出部分省略号展示

1px细线兼容性问题

css设置粗细的值为1px，实际视觉效果会比1px更粗，此时将width或者height改为小数，也会不有视觉上的改变，经过实践，较为有效的办法是通过transform属性进行设置例如：

transform: scaleY(0.5);  // 垂直压缩0.5
transform: scaleX(0.5); // 水平压缩0.5