您的位置:首页> 前端教程> CSS3教程
文章导航

CSS text-overflow

2019-9-17 08:56| 作者: admin| 查看: 1374| 评论: 0|来自: 蚂蚁部落

理解并掌握此属性的使用可以从其名称入手,属性名称由两个单词构成:

(1).text:翻译成汉语具有"文本"的意思。

(2).overflow:翻译成汉语具有"溢出"的意思。

于是可以有理由猜测,此属性的功能是用于规定如何处理溢出的文本,事实也是如此。

text-overflow属性用于规定以何种形式向浏览者发出信号,以提示当前文本产生溢出现象。

比如最为常见的处理方式,在字符串尾部使用"..."替代溢出的文本,或者直接将溢出的文本裁切掉。

通过text-overflow属性即可实现上面列举的两种方式,此属性功能不止于此,但当前浏览器支持度非常低。

语法结构:

[CSS] 纯文本查看 复制代码
text-overflow: clip|ellipsis|string

参数解析:

(1).clip:规定对溢出的文本进行裁切。

(2).ellipsis:规定使用"..."替代溢出的文本。

(3).string(处于实验状态):规定使用指定的字符串替代溢出的文本。

特别说明:

(1).text-overflow属性还可以有其他形式属性值,处于试验状态,且兼容性非常低。

(2).本文暂时不对这些属性做介绍,当这些属性被标准化且兼容性良好,本文会第一时间更新。

下面对此属性生效的条件做一下简单阐述:

(1).既然是对溢出文本进行处理,那么文本必须有溢出现象才会生效。

(2).绝大多数条件下,文本会自动换行,但是text-overflow并不会强制文本不换行。

(3).所以要与overflow和white-space配合使用,否则无效。

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

特别说明:各个浏览器都支持text-overflow属性,对各个属性值的支持有差别。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:250px;
  height:48px;
  background-color: #ccc;
  text-overflow:clip;
} 
</style>  
</head> 
<body> 
<div>蚂蚁部落欢迎您,本站位于山东省青岛市南区。</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/12/114231mz736s9s32eoa7ar.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到,text-overflow属性的设置并没有生效,因为没有满足生效的条件。

(1).属性生效的先决条件是文本换行。

(2).上述文本到达边界后自动换行了,所以没有溢出,自然属性也不会生效。

前文已经提到,需要和overflow和white-space配合使用,代码修改如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/12/114245z1r8i1vtrxcvmdrm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

clip属性值被当前各主流浏览器支持,非常简单不多介绍。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:250px;
  height:48px;
  background-color: #ccc;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
} 
</style> 
</head> 
<body> 
<div>蚂蚁部落欢迎您,本站位于山东省青岛市南区。</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/12/114308c340lhnznls11ln1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

将属性值设置为"ellipsis"即可实现使用三个点替代溢出文本的功能。

如果不使用此属性,实现类似的功能更多的需要借助JavaScript等语言。

ellipsis属性值被当前各主流浏览器支持,非常简单不多介绍。

当然我们也可以使用指定的字符串来替代溢出的文本,但是当前浏览器支持度非常低,看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:250px;
  height:48px;
  background-color: #ccc;
  text-overflow:"ant";
  overflow:hidden;
  white-space:nowrap;
} 
</style> 
</head> 
<body> 
<div>蚂蚁部落欢迎您,本站位于山东省青岛市南区。</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/12/114333usooo3jho9z1njrn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

当前只有火狐浏览器支持此语法结构,当然随着时间的推移支持度随时可能发生变化。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:CSS overflow-wrap下一篇:CSS white-space

最新评论

返回顶部