浅析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 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
html css3不拉伸图片显示效果
Jun 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
PHP 开源AJAX框架14种
2009/08/24 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
javascript 自定义事件初探
2009/08/21 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python中的for循环
2018/09/28 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python实发邮件实例详解
2019/11/11 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
推广普通话演讲稿
2014/05/23 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL