浅析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打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
转一个日期输入控件,支持FF
2007/04/27 Javascript
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
运动会邀请函范文
2014/02/06 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript