【零基础学习web前端】CSS3-文本效果（文本溢出）

Amy

CSS3-文本效果（文本溢出）

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

文本溢出{text-overflow}

text-overflow 属性确定如何向用户发信号通知溢出的内容。它可以被剪裁，或显示省略号“...”或用户定义的字符串。
它接受以下值


clip       指示在内容区域的限制处截断文本。
ellipsis   显示省略号（'...'）以表示剪切的文本。
string   使用给定的字符串来代表被修剪的文本。

[CSS] 纯文本查看 复制代码

div{
    /* 规定段落中的文本不进行换行： */
    white-space:nowrap; 
    width: 10em;
    border: 1px  solid  red; 
    overflow: hidden;
    text-overflow: ellipsis;
}

[HTML] 纯文本查看 复制代码

<div>
        双十二促销【终身VIP】【全年最低价】一次开通永久免费下载所有源码 绝对的全年最低价格。不会存在比这个价格更低的优惠活动了。
    </div>

效果：

若换成

[CSS] 纯文本查看 复制代码

text-overflow: clip;

效果

Amy

【零基础学习web前端】CSS3-文本效果（文本阴影、自动换行）http://www.sufeinet.com/thread-24174-1-1.html

Amy

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

竹林风

强烈支持楼主ing……

liu

真是难得给力的帖子啊。