浅析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滑动开关效果
Sep 28 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 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(1)
2006/10/09 PHP
php数组去重的函数代码
2013/02/03 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
python 实现目录复制的三种小结
2019/12/04 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
Python基于Faker假数据构造库
2020/11/30 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
前台文员岗位职责
2013/12/28 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
三八妇女节活动总结
2014/05/04 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
师范大学生求职信
2014/06/13 职场文书
社区党员公开承诺书
2014/08/30 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
六年级学生评语大全
2014/12/26 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python