浅谈CSS3✤ 用text

日期：2020-12-11 类型：科技新闻 

关键词：微信小程序页面设计，python小程序，小程序首页模板，如何建立微信小程序，怎么做微信小程序

基本英语的语法
text-overflow的应用需相互配合hight,over-flow:hidden;white-space:nowrap;三个特性相互应用

text-overflow: clip;ellipsis;string
clip: 立即掩藏无法显示
ellipse: 用… 三个点来表明外溢的文本 （常见）
string:可自定标记来表明放不下的标识符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.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;
			 这三个特性缺一不能
			*/
		}
	</style>
</head>
<body>
	<div class="tf">
		脚本制作之家脚本制作之家脚本制作之家脚本制作之家脚本制作之家脚本制作之家脚本制作之家脚本制作之家脚本制作之家。
	</div>

	<div class="tf1">
		脚本制作之家脚本制作之家脚本制作之家脚本制作之家脚本制作之家脚本制作之家。
	</div>

	
</body>
</html>

到此这篇有关浅谈CSS3 用text-overflow处理文本排版设计难题的文章内容就详细介绍到这了,大量有关CSS3 文本排版设计內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：css3●▂● flex合理布局完成均值分派原素的实例 返回下一篇：HTML5 body设定自融入全屏