在CSS3中，常用的文本属性text-overflow:clip|ellipsis|string,分别是修剪文本、显示省略号，用指定文本代替（当前浏览器不支持），经常在文本或新闻的摘要中使用，还有一些英文文档中，设置文本超出边界时是否换行。

效果图如下：

css样式：

<style type="text/css">
			/*设置默认样式*/
			
			div {
				height: 100px;
				width: 200px;
				border: 1px solid #000;
				margin: 10px;
			}
			/*文本不换行，超出部分用...表示*/
			
			.div1 {
				overflow: hidden;
				/*超出文本隐藏*/
				white-space: nowrap;
				/*强制文本一行内显示*/
				text-overflow: ellipsis;
			}
			/*文本直接切*/
			
			.div2 {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: clip;
			}
			/*指定文本垂直方向显示5行，超出部分用...代替*/
			.div3 {				
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 5;
				-webkit-box-orient: vertical;
			}
			/*在长单词文本内部进行换行*/
			
			.div4{
				word-wrap: break-word;
			}
		</style>

html样式：

<h2>text-overflow: ellipsis</h2>
		<div class="div1">
			火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。
		</div>
		<h2>text-overflow: clip</h2>
		<div class="div2">
			火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。
		</div>
		<h2>-webkit-line-clamp: 5</h2>
		<div class="div3">
			火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。 火辣辣个人前端博客，没事发表一点学习心得，所思所想。
		</div>
		<h2>word-wrap: break-word</h2>
		<div class="div4">
			My favorite sport is basketballllllllll. I often play basketball with my classmates after school and play with my friends on weekends. I like playing basketball because it can make me strong and health. When I play basketball, I forget all my worries and I can make lots of friends who have the same interest. In the evening when I finish doing my homework
		</div>