CSS文字排版

时间：2017年4月27日13:35:27

《我的博客地图》

    对于前端开发人员来说，虽然大部分时间用来处理 页面布局 和 业务逻辑 问题，但对于细小的环节也需要学习和研究。最近发现，文字排版 也是一个值得关注的话题，因为与文字排版相关的CSS属性比较多。

    与文字排版相关的属性如下：

letter-spacing：normal | length | inherit；设置字符之间的空白（设置字符间距），如t h i s

text-align：left | right | center | justify | inherit;设置文本的水平对齐方式

text-indent：length | % | inherit;设置文本中首行文本的缩进，汉字一般设置2em

white-space：pre | nowarp | pre-warp | pre-line;指定元素内的空白怎么处理

word-spacing：normal | length | inherit；增加或减少字与字之间的空白，如this   is    a

word-wrap: break-word | normal; 长内容自动换行

    和CSS文本相关的其他属性：

color;设置文本颜色

direction;设置文本方向

line-height;设置行高

text-decoration;向文本添加修饰

text-shadow;设置文本阴影

text-transform: none | capitalize |uppercase lowercase | inherit;控制元素中的字母大小写显示，默认 | 每个单词以大写字母开头 | 全部以大写显示 | 全部以小写显示 | 继承父元素属性

unicode-bidi:;设置文本被重写

vertical-align: //设置元素垂直对其方式

baseline //默认元素放置在父元素的基线上

sub //垂直对齐文本的下标

super //垂直对齐文本的上标

top //把元素的顶端与行中最高元素的顶端对齐

text-top //把元素的顶端与父元素字体的顶端对齐

middle //把元素放置在父元素的中部

bottom //把元素的顶端与行中最低的元素的顶端对齐

text-bottom //把元素的底端与父元素字体的底端对齐

length 

% //使用 "line-height" 属性的百分比值来排列此元素。允许使用负值

inherit 

1、单行文本溢出显示省略号

<div class='text'>这里有很多问题</div>

    方案一：css处理

.info{

    font-size: 1.4rem;

    line-height: 3.5rem;

    width:17.5rem;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

    方案二：js处理

array = [{name:''},{},{}]

for(var item in array){

    if(array[item].name.length > 13){

        array[item].name = array[item].name.substring(0,12) + '...'

    }

}