浅析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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 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
php静态文件生成类实例分析
2015/01/03 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
JS定时器实例
2013/04/17 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
详解Vite的新体验
2021/02/22 Javascript
python函数装饰器用法实例详解
2015/06/04 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python字典的常用方法总结
2019/07/31 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
四种会话跟踪技术
2015/05/20 面试题
物流司机岗位职责
2013/12/28 职场文书
公司道歉信范文
2014/01/09 职场文书
安全标准化汇报材料
2014/02/03 职场文书
校园安全检查制度
2014/02/03 职场文书
大班亲子运动会方案
2014/06/10 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
酒店辞职书范文
2015/02/26 职场文书
禁毒主题班会教案
2015/08/14 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js