浅析CSS3 用text-overflow解决文字排版问题


Posted in HTML / CSS onOctober 28, 2020

基本语法
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 文字排版内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 #HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 #HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 #HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 #HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 #HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 #HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 #HTML / CSS
You might like
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
python重试装饰器的简单实现方法
2019/01/31 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python将字符串转换成json的方法小结
2019/07/09 Python
django的csrf实现过程详解
2019/07/26 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
简约控的天堂:The Undone
2016/12/21 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
工作失职检讨书范文
2014/01/16 职场文书
挂职自我鉴定
2014/02/26 职场文书
开学典礼决心书
2014/03/11 职场文书
2015年教研员工作总结
2015/05/26 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
Python实现智慧校园自动评教全新版
2021/06/18 Python
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Js类的构建与继承案例详解
2021/09/15 Javascript
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis