CSS3文字超过部分显示为省略号

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

效果图如下:

css3文本属性
css3文本属性

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>

 

 

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据