HTML超出文本多行截取代码如下:
HTML:
<div class="sytm-text-1">
     <p>
          沈阳网页制作公司有添美科技,网址是:http://www.sytm.net/wangzhanjianshe/
     </p>
</div>

<div class="sytm-text-2">
     <p>
          沈阳网上商城建设公司有添美科技,网址是:http://www.sytm.net/jiejuefangan/
     </p>
</div>

CSS:

.sytm-text-1 {
    color: #FFF;
    background: #000;
    width: 410px;
    height: 22px;
}
.sytm-text-2 {
    color: #FFF;
    background: #000;
    width: 410px;
    height: 44px;
}
p {
    line-height: 22px;
}

JS(引入jQuery):

$("div[class*='sytm-text']").each(function(e){
    var divHeight = $(this).height();
    var $p = $("p", $(this)).eq(0);
 
    while ($p.outerHeight() > divHeight) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});
通过上述代码可以发现,实现这个效果的主要原理在于通过子容器(p)与父容器(div)高度的比较根据正则表达式进行字符截取,直到两者相等为止。所以控制截取行数的关键自然在div高度上了。

HTML超出文本多行截取代码的更多相关文章

  1. css3实现超出文本指定行数(指定文本长度)用省略号代替

    测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...

  2. 利用css3实现超出文本指定行数与省略号效果

    <style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...

  3. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

  4. 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏

    早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...

  5. CSS3中text-overflow支持以...代替超出文本

    CSS3中text-overflow支持以...代替超出文本. 1.div1:默认状态.超出文本默认显示在div外 2.div2:text-overflow:ellipsis; 使用text-over ...

  6. 只有20行Javascript代码!手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  7. bat如何提取文本指定行的内容

    背景:使用CTS框架运行完测试后,会在logs中生成devices_log和host_log,在results中生成相应的结果(报告).根据报告信息我们可以得知失败的用例,但是却不能知道为什么用例会失 ...

  8. 21行python代码实现拼写检查器

    引入 大家在使用谷歌或者百度搜索时,输入搜索内容时,谷歌总是能提供很好的拼写检查,比方你输入 speling,谷歌会立即返回 spelling. 前几天,看到http://norvig.com/spe ...

  9. 60行JavaScript代码俄罗斯方块

    教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏   早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下( ...

随机推荐

  1. GPS(1)核心API及3种列出LocationProvider的方法

    GPS的常用API Android SDK为GPS提供了很多API,其中LocationManager类是这些API的核心.所有与GPS相关的操作都由LocationManager对象及其派生的对象完 ...

  2. [HIS] HIT行业常用名词及缩写定义

    [HIS] HIT行业常用名词及缩写定义 1.   EHR 居民个人电子健康记录 2.   MPI 居民个人主索引 3.   HIS 医院管理信息系统 4.   CIS 医院临床信息系统 5.   P ...

  3. Windows Embedded Compact 2013 安装体验

    6月14日,微软正式发布了Windows embedded compact 2013,大家还是习惯称之为Window CE 8,公司也要开始做windows embedded compact 2013 ...

  4. linux中fork()函数详解(转)

    转自:http://blog.csdn.net/jason314/article/details/5640969 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过 ...

  5. 转 Android adb root权限

    永久root带文件 因为开发需要,我经常会用到adb这个工具(Android Debug Bridge),我们都知道adb shell默认是没有root权限的,修改系统文件就很不方便了,adb pus ...

  6. php discuz框架接口不能正常访问的问题

    本人php小白,无php编程基础,直接上php服务器部署,后果很严重.....所以务必看完请给”顶“给评论,以表示对小白的鼓励和赞赏! 关于discuz框架,独自加班,废寝忘食,然已无力吐槽..... ...

  7. hud 3336 count the string (KMP)

    这道题本来想对了,可是因为hdu对pascal语言的限制是我认为自己想错了,结果一看题解发现自己对了…… 题意:给以字符串 计算出以前i个字符为前缀的字符中 在主串中出现的次数和 如: num(aba ...

  8. [HDU 1695] GCD

    GCD Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  9. C# 实例化顺序

    static class Program { static void Main() { BaseB baseb = new BaseB(); baseb.MyFun(); Console.ReadKe ...

  10. HDU 4565 So Easy!

    So Easy! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...