浅析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 相关文章推荐
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
canvas拼图功能实现代码示例
Nov 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
Python函数嵌套实例
2014/09/23 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
python代码xml转txt实例
2020/03/10 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
音乐节策划方案
2014/06/09 职场文书
高中运动会广播稿
2014/09/16 职场文书
2015年考研复习计划
2015/01/19 职场文书
工程部文员岗位职责
2015/02/04 职场文书
英语教师个人工作总结
2015/02/09 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
Nginx进程管理和重载原理详解
2021/04/22 Servers
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript