首行缩进
text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
属性值：
-
(length)定义固定的缩进，默认 0 ，单位可以是px、em、rem。文段文字缩进建议采用em为单位，要缩进刚好2个文字空格间距，字体大小发生改变时，缩进效果保持一致。 -
(%)定义基于父元素宽度的百分比的缩进。 -
inherit规定应该从父元素继承 text-indent 属性的值。
文字溢出省略
单行文字溢出
overflow: hidden; // 超出隐藏
text-overflow: ellipsis; // 文字溢出显示省略号
white-space: nowrap; // 文字不换行
多行文字溢出
WebKit内核存在一个私有属性 -webkit-line-clamp
注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 2; // 限制两行
-webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
那么，跨浏览器兼容方案来了
CSS 处理模式
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
// 通过伪类定位content为... 背景图片带过渡色彩的盒子
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}
Clamp.js 处理模式
var module = document.getElementById("clampjs");
$clamp(module, {clamp: 3});
文字左右间距控制问题
文字左右间距考虑两种情况。
- 文字与单词间距，使用
letter-spacing: 20px; - 单词与单词间距，使用
word-spacing: 20px;
letter-spacing: 20px; // J a m s e W o n g i s 进 行 哦
word-spacing: 20px; // JamseWong is 进行哦
