浅析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 相关文章推荐
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
Js组件的一些写法
2010/09/10 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python中如何使用insert函数
2020/01/09 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python进行特征提取的示例代码
2020/10/15 Python
Python可以用来做什么
2020/11/23 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
作文评语大全
2014/04/23 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
Golang 对es的操作实例
2022/04/20 Golang