网站建设资讯

NEWS

网站建设资讯

CSS3怎么用text-overflow解决文字排版问题

小编给大家分享一下CSS3怎么用text-overflow解决文字排版问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联建站-专业网站定制、快速模板网站建设、高性价比华龙网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式华龙网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖华龙地区。费用合理售后完善,十多年实体公司更值得信赖。

基本语法
text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用

text-overflow: clip;ellipsis;string
clip: 直接隐藏不显示
ellipse: 用… 三个点来表示溢出的文字 (常用)
string:可自定义符号来表示放不下的字符




	
	
	
		.tf{
			width: 100px;
			height:50px;
			border:1px solid black;
			overflow: hidden;
			text-overflow: clip;/*如果只是单纯的隐藏的话,加不加这句话效果都一样  height+overflow就可对溢出的文字直接隐藏*/
		}
		.tf1{
			width: 100px;
			border:1px solid black;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			white-space: nowrap;
			/*若使用ellipsis属性     
				text-overflow:ellipsis; overflow: hidden;white-space: nowrap;
			 这三个属性缺一不可
			*/
		}
	


	
		创新互联创新互联创新互联创新互联创新互联创新互联创新互联创新互联创新互联。
	
创新互联创新互联创新互联创新互联创新互联创新互联。

以上是“CSS3怎么用text-overflow解决文字排版问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


标题名称:CSS3怎么用text-overflow解决文字排版问题
本文路径:http://cdweb.net/article/jedeii.html

其他资讯