文本处理常见问题

首行缩进

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 进行哦