浅析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编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP中数组的三种排序方法分享
2012/05/07 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
vue+ts下对axios的封装实现
2020/02/18 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python实现反转部分单向链表
2018/09/27 Python
python实现udp传输图片功能
2020/03/20 Python
Python代码需要缩进吗
2020/07/01 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
中秋节随笔
2015/08/15 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Java 死锁解决方案
2022/05/11 Java/Android