CSS3

关于文字处理的样式学习

text-overflow属性

div.test{
	text-overflow:ellipsis;
}

默认值是clip

语法：

text-overflow: clip|ellipsis|string;

clip: 修剪文本

ellipsis： 显示省略符号来代表被修剪的文本

string： 使用给定的字符串来代表被修剪的文本

最近需要做一个商品列表，在手机屏幕不大一样的市场里，如果做到列表中刚刚好显示2行，偶然间发现淘宝的手机版有用到-webkit-line-clamp来实现这种效果

限制在一个块元素显示的文本的行数。

-webkit-line-clamp是一个不规范的水性，他没有出现在css规范草案中。

为了实现该效果，它需要组合其他外来的webkit属性。常见结合属性：

• display:-webkit-box 必须结合的属性，将对象作为弹性伸缩盒子模型显示
• webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
• text-overflow,可以用来多行文本的情况下，用省略号“…”来隐藏超出范围的文本。

适用场景：适合于商品列表或者新闻列表的展示。

html:
<div class='box'>
	<img src=""/>
	<h3>大号高宽陶瓷花盆带托盘桌面花盆中国风梅兰竹菊花盆陶瓷主句花盆陶瓷</h3>
	CSS:
	.box h3{
		display: -webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		overflow:hidden;
		font-size:14px;
		line-height:20px;
	}
</div>