HTML超出文本多行截取代码
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超出文本多行截取代码的更多相关文章
- css3实现超出文本指定行数(指定文本长度)用省略号代替
测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...
- 利用css3实现超出文本指定行数与省略号效果
<style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
- 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏
早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...
- CSS3中text-overflow支持以...代替超出文本
CSS3中text-overflow支持以...代替超出文本. 1.div1:默认状态.超出文本默认显示在div外 2.div2:text-overflow:ellipsis; 使用text-over ...
- 只有20行Javascript代码!手把手教你写一个页面模板引擎
http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...
- bat如何提取文本指定行的内容
背景:使用CTS框架运行完测试后,会在logs中生成devices_log和host_log,在results中生成相应的结果(报告).根据报告信息我们可以得知失败的用例,但是却不能知道为什么用例会失 ...
- 21行python代码实现拼写检查器
引入 大家在使用谷歌或者百度搜索时,输入搜索内容时,谷歌总是能提供很好的拼写检查,比方你输入 speling,谷歌会立即返回 spelling. 前几天,看到http://norvig.com/spe ...
- 60行JavaScript代码俄罗斯方块
教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏 早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下( ...
随机推荐
- GPS(1)核心API及3种列出LocationProvider的方法
GPS的常用API Android SDK为GPS提供了很多API,其中LocationManager类是这些API的核心.所有与GPS相关的操作都由LocationManager对象及其派生的对象完 ...
- [HIS] HIT行业常用名词及缩写定义
[HIS] HIT行业常用名词及缩写定义 1. EHR 居民个人电子健康记录 2. MPI 居民个人主索引 3. HIS 医院管理信息系统 4. CIS 医院临床信息系统 5. P ...
- Windows Embedded Compact 2013 安装体验
6月14日,微软正式发布了Windows embedded compact 2013,大家还是习惯称之为Window CE 8,公司也要开始做windows embedded compact 2013 ...
- linux中fork()函数详解(转)
转自:http://blog.csdn.net/jason314/article/details/5640969 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过 ...
- 转 Android adb root权限
永久root带文件 因为开发需要,我经常会用到adb这个工具(Android Debug Bridge),我们都知道adb shell默认是没有root权限的,修改系统文件就很不方便了,adb pus ...
- php discuz框架接口不能正常访问的问题
本人php小白,无php编程基础,直接上php服务器部署,后果很严重.....所以务必看完请给”顶“给评论,以表示对小白的鼓励和赞赏! 关于discuz框架,独自加班,废寝忘食,然已无力吐槽..... ...
- hud 3336 count the string (KMP)
这道题本来想对了,可是因为hdu对pascal语言的限制是我认为自己想错了,结果一看题解发现自己对了…… 题意:给以字符串 计算出以前i个字符为前缀的字符中 在主串中出现的次数和 如: num(aba ...
- [HDU 1695] GCD
GCD Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- C# 实例化顺序
static class Program { static void Main() { BaseB baseb = new BaseB(); baseb.MyFun(); Console.ReadKe ...
- HDU 4565 So Easy!
So Easy! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...