这次给大家带来jQuery实现输入文字超过规定行数时自动添加省略号，jQuery实现输入文字超过规定行数时自动添加省略号的注意事项有哪些，下面就是实战案例，一起来看一下。
jQuery自动添加省略号
 
$(function () {
 
$(".figcaption").each(function (i) {
 
var pH = $(this).height();
 
var $p = $("p", $(this)).eq(0);
 
while ($p.outerHeight() > pH) {
 
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
 
};
 
});
 
});
 
*{
 
padding: 0px;
 
margin: 0px;
 
}
 
.figcaption{
 
width: 300px;
 
height: 50px;
 
/*根据父元素的高度来添加省略号
 
*可以任意设置显示的行数
 
*/
 
border: 1px solid red;
 
}
 
You probably can't do it (currently?) without a fixed-width font like Courier. With
 
a fixed-width font every letter occupies the same horizontal space, so you could
 
probably count the letters and multiply the result with the current font size in
 
ems or exs. Then you would just have to test how many letters fit on one line, and
 
then break it up.
 
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
 
推荐阅读：

 
这是我的JSON格式
 
{
 
"result": {
 
"buildname1": [{
 
"table1": ["xxx","yyy"]
 
}, {
 
"table2": ["xxx","yyy"]
 
}, {
 
"table3": ["xxx","yyy"]
 
}],
 
"buildname2": [{
 
"table1": ["xxx","yyy"]
 
}, {
 
"table2": ["xxx","yyy"]
 
}, {
 
"table3": ["xxx","yyy"]
 
}]
 
},
 
"Build sets": "yyy",
 
"destinationPath": "xxx",
 
"status": 1
 
}
 
这是我用来动态创建表格的函数。
 
function generateTable(data){ //data is the parsed JSON Object from an ajax request
 
$("#test-table tbody").empty();//Empty the table first
 
if(data.result != null){
 
$.each(data.result,function(key,value){
 
var buildName ="
"+key+"
 "+value.length+" base tables";
 
var baseTable ="";
 
for(i=0;i
 
if( i == 0 ){
 
for(var k in value[0]){
 
baseTable ="
"+k+"";
 
}
 
}
 
else{
 
for(var key in value[i]){
 
baseTable = baseTable + "
"+key+"";
 
}
 
}
 
}
 
$("#test-table").append(buildName + baseTable);
 
});
 
}
 
}
 
这是我想要实现的目标
 

 
HTML
 
Build NameBase TableQuery List
 
问题：
 
我成功创建了前两列(尽管有点难看，以为我可以稍后改进它)，我被困在第三列。我发布的代码正确地创建了前两列，但是在rowspan(第三列)中的rowspan逻辑似乎无法实现。请指导我。

linux编译器中乱码、增加行数、以及编译运行
 
初学linux系统过程中遇到的一些问题以及解决方法记录
 1、在vmware虚拟机中安装ubuntu下使用vi编辑文件，发现上下左右方向键不能在文本中移动，出现ABCD字符，backspace也不能删除字符
 解决方法：
 ubuntu默认安装装的是vim tiny版本，而需要的是vim full版本。执行下面的语句安装vim full版本：
 $sudo apt-get remove vim-common
 
$sudo apt-get install vim
 等系统执行结束即可
 
2、vi编译文件中增加行数显示
 1）使用vi 文件名进行创建并打开文件
 
 
2）进入文件编译器内摁Esc键进入命令模式
 3）输入：set nu回车后即可显示行数
 
 
3、linux编译器中编译运行
 gcc 文件名(编译文件，可执行文件需要为.c文件)
 ./a.out（执行文件）
 例如：
 gcc hello.c
 ./a.out
 

 
本文演示了如何为网页中的源代码块自动设置行号。
 
现在，我们准备在网页中显示C++的Hello world。这段著名的代码如下所示：
 
#include 
 
intmain()
 
{
 
std::cout <
 
return0;
 
}
 
在HTML中，一般使用
 
来显示源代码。
 
#include <iostream>
 
int main()
 
{
 
std::cout <
 
return 0;
 
}
 
第一行中，因为“”是HTML标签的标记，因此，我们需要将其转义，分别对应于“<”及“>”。虽然使用HTML表示这两个符号较怪，但在浏览器中就可以显示出正确的符号。(注：在Dreamweaver或其他HTML编辑器中，我们在设计视图中直接输入这两个符号，这些软件会自动为我们转义。)
 
在网页中显示效果如下：
 

 
这段源代码没有格式，也没有行号，因此看起来很不舒服。本文的目标，是将上面的源代码在网页中的显示转换为下面的形式:
 

 
其特点是：
 
自动缩进；
 
自动生成行号；
 
奇偶行以不同颜色显示；
 
高亮显示鼠标所指之行。
 
现在让我们开始这段奇幻之旅。
 
1. 稍加粉饰
 
先用CSS给它化点小妆。
 
pre.sourceCode {
 
background-color:#9FB5DE;
 
border:1pxsolidblack;
 
margin-left:2em;
 
}
 
效果：
 

 
背景为蓝色，黑边，且缩进。
 
2. Javascript前来整容
 
在HTML中，OL的每一个LI可以自动编号，可以将每行代码都转换为OL中的LI后可解决每行的自动编号问题。至于每行的不同颜色，可为LI设置不同的className属性。由于行号需要与代码区分开来，可为代码内容增加一个SPAN。因此，问题可细化为：
 
取出
 
中的每一行代码
 
将每行代码转化为
，为此设置代表奇偶行的className，且将代码内容置于
 中
 
将每个生成的
置于
 
之下
 
删除
 
节点下的所有子节点
 
在
 
节点之下增加
 
子节点
 
通过Javascript中的DOM，我们可以轻松地实现以上步骤。
 
window.onload = function() {
 
varpreElements = document.getElementsByTagName("pre");
 
for(vari = 0; i 
 
vartarget = preElements.item(i);
 
if(target.className !="sourceCode") {
 
continue;
 
}
 
varcontent = target.firstChild.nodeValue;
 
varlinesArray = content.split(String.fromCharCode(13));
 
if(linesArray.length == 1) {
 
linesArray = content.split(String.fromCharCode(10));
 
}
 
varolContainer = document.createElement("ol");
 
varindex = 1;
 
for(varj = 0; j 
 
varliContainer = document.createElement("li");
 
liContainer.className = index++ % 2 ? "odd":"even";
 
varspanContainer = document.createElement("span");
 
varaText = document.createTextNode(linesArray[j]);
 
spanContainer.appendChild(aText);
 
liContainer.appendChild(spanContainer);
 
olContainer.appendChild(liContainer);
 
}
 
while(target.firstChild) {
 
target.removeChild(target.firstChild);
 
}
 
target.appendChild(olContainer);
 
}
 
}
 
效果如下：
 

 
Javascript代码的长度貌似吓人，但每一步骤都较清晰。
 
第2行，使用一个匿名函数，在页面加载完毕时自动执行所有任务。
 
第3行，取得所有
 
标签。第5行至第36行，对每个
 
标签进行加工。
 
第6行，将每个
 
标签存至一个名为target的变量。第7至第9行，如果其className不是“sourceCode”，则不是我们所关心的内容，直接跳过。注意className这个非常特殊的属性(attribute)，我们不能使用getAttribute()来获得此属性值，而应直接通过该节点的className属性(property)来取出。Web标准还管不管了？
 
由于每个
 
下面只有一个文本型的子节点，因此在第11行，可通过其firstChild.nodeValue来快速取得其内容。
 
第12至15行开始对其内容进行断行。换行符在IE中表现为代码为13的字符，而在Firefox中却只为10。因此，先应对IE后，再来对付Firefox。Web标准路漫漫，连CharCode都暗藏杀机！断行后，linesArray变量成为存储每行内容的数组。
 
对每行内容，第21行根据其奇偶性分别设置“even”及“odd”的className，第24行为每行内容创建一个文本节点，第26至28行，文本->span->li>ol。这样，第17行所创建的
 
就布满了所需的内容。但此
   
目前只存在于内存中，还看不见。
 
第31至33行，将
 
原来的内容全部删除，第35行换上加工完毕的
 
。移形换位，不是吗？
 
此时，查看页面源文件，我们看不出经过幕后整容后的真实DOM。Firefox可通过DOM Inspector来查看DOM结构。IE8也赶了新潮流。在IE8中按F12，调出开发人员工具，按Ctrl + G，就可以让其现形了。例如，对于源代码的第2行，其DOM结构如下：
 
int main()
 
在第2步中，章子怡(CSS)刚一露脸，就被张艺谋喊停：“停！舞台未妥，急甚急甚？”。现在既然张艺谋已经布置好舞台，章子怡兴高采烈地重新粉墨登场了。
 
3. CSS现身化妆
 
序号
 
CSS
 
目前效果
 
解析
 
1
 
pre.sourceCode ol {
 
padding: 0;
 
margin: 0;
 
margin-left: 0;
 
}
 
#include 
 
int main()
 
{
 
std::cout << "Hello world";
 
return 0;
 
}
 
我们先设置
 
的样式。根据第2步的第35行，在DOM层级中，现在
   
是
 
的直接子节点。
 
先将
 
的padding及margin先设为0。我们发现一个比较有趣的现象：
   
所在的box不包含
的序号。并且随着
     
的margin-left的值越大，
       
所在区域将逐渐
的标号包含进来。
下面我们观察margin-left的值分别设为0、5、10、20、35时的不同情况。
当margin-left等于0时的情况
pre.sourceCode ol {
padding: 0;
margin: 0;
margin-left: 5px;
}
#include 
int main()
{
std::cout << "Hello world";
return 0;
}
当margin-left等于5px时的情况
pre.sourceCode ol {
padding: 0;
margin: 0;
margin-left: 10px;
}
#include 
int main()
{
std::cout << "Hello world";
return 0;
}
当margin-left等于10px时的情况
pre.sourceCode ol {
padding: 0;
margin: 0;
margin-left: 20px;
}
#include 
int main()
{
std::cout << "Hello world";
return 0;
}
当margin-left等于20px时的情况
pre.sourceCode ol {
padding: 0;
margin: 0;
margin-left: 35px;
}
#include 
int main()
{
std::cout << "Hello world";
return 0;
}
当margin-left等于35px时的情况。对于百行之内的源代码，35px的值应该是较好的选择。
原因：
         
有一个名为“list-sytle-position”的属性，其值可设为inside及outside。当该值设为outside时，
           
所在box将不包含其下
序号。这是默认值。当该值设为inside时，
             
所在box将包含其下
序号。上面的实验说明了一点：在该属性为outside时，随着
               
的margin-left值增大，可以实现inside的效果。
当
               
的list-style-position之值设为inside时，更易实现本文的目标。但由于其值默认为outside，故本文不厌其烦地选择outside作为实现方式。
2
pre.sourceCode li
{
padding: 2px 10px;
border-left: 2px groove silver;
color: #333;
}
#include 
int main()
{
std::cout << "Hello world";
return 0;
}
开始设置
。
padding设置行距。
border-left将序号及代码内容分开。
颜色设为稍淡点，以免分散读者阅读主文的注意力。
3
pre.sourceCode li.odd {
background-color: #dbdbdb;
}
pre.sourceCode li.even {
background-color: #d4d4d4;
}
#include 
int main()
{
std::cout << "Hello world";
return 0;
}
设置
的奇偶行。只需分别设置不同的背景色即可。
4
pre.sourceCode li:hover
{
background-color: #9FB5DE;
}
#include 
int main()
{
std::cout << "Hello world";
return 0;
}
高亮显示鼠标所在行。IE8已经支持非链接标签的hover伪类，喜讯。现在，左右两边的效果已经完全一致了。
结语
就像张艺谋与章子怡这对好搭档经常获得电影节大奖一样，Javascript与CSS的完美组合，可收到出乎意料之外的效果。解决问题时，如果我们能充分发挥Javascript及CSS的长处，可弥补现在HTML中Web组件的匮乏。
(本文通过IE8/WinXP的环境下的测试)
(注：因为CSDN的博客不鼓励博主在发表文章时使用CSS及JavaScript，因此本文的一些需要CSS及JavaScript支持的特点无法显示出来。因此，拟将效果转换为图片的形式表现出来。本文尚在转化中。 2011-7-27)