浅析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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 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静态新闻列表自动生成代码
2007/06/14 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
Python的re模块正则表达式操作
2016/05/25 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python交互式图形编程实例(一)
2017/11/17 Python
分析Python读取文件时的路径问题
2018/02/11 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
学习Python需要哪些工具
2020/09/04 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
市级优秀班主任事迹材料
2014/05/13 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫