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、单行文本溢出显示省略号
方案一：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) + '...'\}
}
女爷i
怼烎@
超、凢脫俗
àì夳堔傛蜴生んèń
还没有评论，来说两句吧...