前端单行与多行文本的省略表示

本文介绍了如何使用CSS和jQuery实现前端文本的省略效果,包括单行文本通过`overflow: hidden; white-space: nowrap; text-overflow: ellipsis;`实现省略号隐藏超长文本,以及多行文本利用jQuery动态调整文本内容以适应固定高度的容器,展示省略号。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


1.      单行文本

 

<!-- 在单行文本的情况下,可以用来使超出范围的文本用省略号隐藏 -->

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

 

技术:CSS

 

注意:

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

 

说明:

overflow 属性规定当内容溢出元素框时发生的事情,所有主流浏览器都支持,

hidden值是指内容会被修剪,并且其余内容是不可见的。

 

text-overflow属性是设置或检索是否使用一个省略标记(...)标示对象内文本的溢出,IE,Chrome和Safari支持,Firefox和Opera不支持,

ellipsis值是指当对象内文本溢出时显示省略标记(...)。

 

white-space 属性设置如何处理元素内的空白,所有主流浏览器都支持,

nowrap值规定段落中的文本不进行换行。

 

2.      多行文本

 

<!-- 多行文本的情况下,用省略号“...”隐藏超出范围的文本 -->

.figcaption {

    background: #EEE;

    width: 410px;

    height: 3em;

    margin: 1em;

}

.figcaption p {

    margin: 0;

    line-height: 1.5em;

}

 

$(".figcaption").each(function(i){

    var divH = $(this).height();

    var $p = $("p", $(this)).eq(0);

    while ($p.outerHeight() > divH) {

       $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/,"..."));

    };

});


思路:文本框高度指定为多行的固定宽度(比如height:3em),通过从后向前逐个删除末尾字符,直至文本高度小于文本框高度。

 

技术:CSS+jQuery

 

优点:跨浏览器

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值