【零基础学习web前端】限制显示字数长度

Amy

【零基础学习web前端】限制显示字数长度

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

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

很多的时候，我们为了保证页面的整洁美观，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。
今天就给大家介绍一个比较简单的方式来限制字数，只需要css就可以了。
1、文字超出一行，省略超出部分，显示'...'
这种情况可以取一个类名专门用于这种情况。

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

.line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; [color=#008000][backcolor=transparent][font=Tahoma,] /*[/font][/backcolor][/color]文本不换行，这样超出一行的部分被截取，显示...[color=#008000][backcolor=transparent][font=Tahoma,]*/[/font][/backcolor][/color]
    }

2、可以给容器限制宽度，超出时可以显示'...'

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

p{
    max-width: 20em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /*超出部分用...代替*/
}

liu

真是难得给力的帖子啊。

竹林风

强烈支持楼主ing……

站长苏飞

我只是路过打酱油的。

范范

无回帖，不论坛，这才是人道。

惜

激动人心，无法言表！