Article Detail

文字超出隐藏并显示省略号

.css1{ color:#6699ff;border:1px #ff8000 dashed; margin-bottom:20px; width: 20em;...

HTML 阅读 51.2万 2 分钟阅读 2015-10-15 10:05

<style type="text/css">
.css1{
    color:#6699ff;border:1px #ff8000 dashed;
    margin-bottom:20px;
    width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
    width: 20em;/*不允许出现半汉字截断*/
    color:#6699ff;border:1px #ff8000 dashed;
}
</style>
<div class="css1">Web前端开发 - 专注于网站前端设计与Web用户体验</div>
<div class="css2">Web前端开发 - 专注于网站前端设计与Web用户体验</div>

Comments 评论区

广西南宁市 2016-09-13 15:49

CSS、j's单行、多行文本溢出显示省略号
在项目中，由于实际描述文字过多，导致初始页面纵向长度过长，也使得余下信息利用率降低；所以在文字过多的时候，初始化限制行数是有必要的

1. CSS单行文本溢出，显示省略号

<div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
    我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出。
</div>

2. CSS多行文本溢出，显示省略号

<div style="overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;">
    我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本。
</div>

上面两种适合标签里面只有文字的情况，而有时我们会遇到这样的情况

<div>
    <p>
        <span>我是内容</span>
    </p>
    <p>
        <span>我是内容</span>
    </p>
    <p>
        <span>我是内容</span>
    </p>
    <p>
        <span>我是内容</span>
    </p>
</div>

3. 第三种就是解决上面情况遇到的问题

我在网上看了很多例子，各有各的好，我使用的是给固定的line-height，换行也是每行在固定的的高度，如：line-height:20px;，每次换空行也要让空行是20px，这样我们就可以利用20的倍数来合理的显示内容要显示的行数和内容

<div class="text">
    <p>
        你不想要改变世界，但是你想要看日出？想要体验下传说中的晨跑？想在晨跑中偶遇男神女神？想要看下早上5点图书馆或训练场是否有人？想呼吸下还没被汽车尾气过度渲染的空气？想给自己给爱人做个早餐？你得早起呀！昨晚事情没做完？考研单词还差几页？赶飞机、赶火车？你得早起呀！你不想上班也得早起请假不是嘛～
    </p>
    <p>
        欢迎大家参加早起的鸟儿有虫吃－21天早起计划。一日之计在于晨，在沐浴晨光的过程中，我们祝愿大家开始美好的一天！
    </p>
    <span class="points">...</span>
</div>

.text{color:#707070;padding:0 12px;position:relative;line-height:20px;overflow:hidden;
margin-bottom:12px;max-height:60px;}
.points{content:"...";position:absolute;bottom:0;right:16px;padding-left:40px;font-size:18px;letter-spacing:3px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);}
.text p{margin:0;}
.text p+p{margin-top:20px;}

// 字体显示
    var showBoo = true;
    $('.de-box .text').on('click',function(){
        if(showBoo){
            console.log(1);
            $('.de-box .text').css('maxHeight','none');
            $('.de-box .points').hide();
            showBoo = false;
        }else{
            $('.de-box .text').css('maxHeight','60px');
            $('.de-box .points').show();
            showBoo = true;
        };
    });

这种情况会出现换行出现空行显示的现象，这个问题先留着，今天有些累了

#⁰

置顶 广西河池市金城江区 2018-03-08 15:07

js 控制超出字数显示省略号

//多余显示省略号
function wordlimit(cname, wordlength) {
    var cname = document.getElementsByClassName(cname);
    for (var i = 0; i < cname.length; i++) {　　　　　　
        var nowLength = cname[i].innerHTML.length;
        if (nowLength > wordlength) {
            cname[i].innerHTML = cname[i].innerHTML.substr(0, wordlength) + '...';
        }　　　　　　
    }　
};

//调用，description为class名
wordlimit('description', 30)

示例：

<div class="description">伊思网拓伊网博客互联网解决方案提供商iswtf.com伊思网拓伊网博客互联网解决方案提供商iswtf.com伊思网拓伊网博客互联网解决方案提供商iswtf.com伊思网拓伊网博客互联网解决方案提供商iswtf.com伊思网拓伊网博客互联网解决方案提供商iswtf.com伊思网拓伊网博客互联网解决方案提供商iswtf.com伊思网拓伊网博客互联网解决方案提供商iswtf.com伊思网拓伊网博客互联网解决方案提供商iswtf.com伊思网拓伊网博客互联网解决方案提供商iswtf.com</div>
<script>
function wordlimit(cname, wordlength) {
    var cname = document.getElementsByClassName(cname);
    for (var i = 0; i < cname.length; i++) {　　　　　　
        var nowLength = cname[i].innerHTML.length;
        if (nowLength > wordlength) {
            cname[i].innerHTML = cname[i].innerHTML.substr(0, wordlength) + '...';
        }　　　　　　
    }　
};

wordlimit('description', 20)

</script>

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。

⌂ ↓ ↑

操作提示