您现在的位置是:蓝石榴 > 个人博客 > 前端

个人博客

CSS3省略标记text-overflow

2016-09-15前端 1551
text-overflow用来设置是否使用一个省略标记(···)标示对象内文本的溢出。
1.使用方法:

text-overflow用来设置是否使用一个省略标记(···)标示对象内文本的溢出,语法如下:

text-overflow:ellipsis;

注:text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须如下代码:

.demo{

overflow:hidden;/*溢出内容为隐藏*/

white-space:nowrap;/*定义强制文本在一行内显示*/

}

2.代码示例:

.demo{

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

width:400px;

padding:10px;

font:bold 45px/100% "楷体";

background:#9da;

text-shadow:4px 4px 0 #f3b

}

效果如下:

蓝石榴个人博客是超酷的IT学习平台
很赞哦!(484)