CSS3 text-overflow文本溢出显示省略符号或自定义字符串属性

原创 国哥笔记  2018-09-18 20:49  阅读 1,573 views 次

text-overflow属性的定义及用法

css3中,text-overflow属性是用来指定当文本溢出包含它的元素时,应该如何显示。通过text-overflow属性,我们可以让溢出的文本不显示,也可以用省略号来代替或其它自定字符串来代替。目前大部分主流浏览器都支持了text-overflow属性。

text-overflow属性语法格式

css语法:text-overflow: clip / ellipsis / string;

JavaScript语法:object.style.textOverflow="ellipsis / ellipsis / string";

text-overflow属性值说明

  • clip:修剪文本,即溢出的部分文本不显示;
  • ellipsis:用省略符号来代表被修剪的文本;
  • string:用自定义字符串来代表被修剪的文本(目前只在Firefox 浏览器下有效)。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 text-overflow文本溢出显示省略符号或自定义字符串属性</title>
<style type="text/css">
body{background: #ddd;font-size:18px ;}
#a,#b,#c{border: 1px solid red;width: 200px;overflow:hidden;white-space:nowrap;}
#a{text-overflow:clip;}
#b{text-overflow:ellipsis;}
#c{text-overflow:'***';}
#d{color: red;}
</style>
</head>
<body>
<div id = "a">将裁剪溢出部分:text-overflow:clip;</div>
<div id = "b">将用省略号来代替裁剪部分text-overflow:ellipsis;</div>
<div id = "c">将用***来代替裁剪部分text-overflow:'***';</div>
<div id = "d">显示自定义字符串目前只在 Firefox 浏览器下有效</div>
</body>
</html>

运行结果:

CSS3 text-overflow文本溢出显示省略符号或自定义字符串属性

注意:text-overflow属性只用来定义文本溢出时是否显示省略标记(省略号或自定义字符串),并不定义文本不换行和溢出部分不显示,所以要实现溢出时产生省略标记的效果,必须得强制定义文本在一行内显示(white-space:nowrap;)和溢出部分文本隐藏不显示(overflow:hidden;)。

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-text-overflow.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情