位置:电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS3基础样式
CSS3 高级样式
当前阅读教程:CSS3教程 > text-overflow 属性
阅读(22555525)      收藏       赞(5685)      分享
上一篇: text-align-last属性 下一篇: text-shadow 文本阴影

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

image.png

属性定义及使用说明

text-overflow属性指定当文本溢出包含它的元素,应该发生什么。

默认值:

clip

继承:

no

版本:

CSS3

JavaScript 语法:

object.style.textOverflow="ellipsis"

语法

text-overflow: clip|ellipsis|string;

值属性

描述

clip

修剪文本。

ellipsis

显示省略符号来代表被修剪的文本。

string

使用给定的字符串来代表被修剪的文本。

 

 

实例

代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow 属性</title>
<!--定义内部样式-->
     <style>
             .test
             {
                      white-space:nowrap; /*不换行*/
                      width:12em; /*宽度*/
                      overflow:hidden; /*溢出隐藏*/
                      border:1px solid #000000;/*边框*/
             }
     </style>
    
</head>
<body>
    
     <p>以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。</p>
     <p>div 使用 &quot;text-overflow:ellipsis&quot;:</p>
     <div style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
    
     <p>div 使用 &quot;text-overflow:clip&quot;:</p>
     <div style="text-overflow:clip;">This is some long text that will not fit in the box</div>
    
     <p>div 使用自定义字符串 &quot;text-overflow: &gt;&gt;&quot;(只在 Firefox 浏览器下有效):</p>
     <div style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
    
</body>
</html>
效果图

小白教程网www.2d5.net

image.png



上一篇: text-align-last属性 下一篇: text-shadow 文本阴影
毕业设计网             广告联系QQ:45157718(微信同号)