浅析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圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
CSS3常见动画的实现方式
Apr 14 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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python操作MongoDB基础知识
2013/11/01 Python
python+mysql实现简单的web程序
2014/09/11 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python3实现微型的web服务器
2019/09/03 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python 如何引入协程和原理分析
2020/11/30 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
村级环境卫生整治方案
2014/05/04 职场文书
节能环保演讲稿
2014/08/28 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
党员查摆剖析材料
2014/10/10 职场文书
整改报告格式
2014/11/06 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
详解vue中v-for的key唯一性
2021/05/15 Vue.js