`

使用JS让很长的文字分行显示

 
阅读更多

有时候一个TD里面要放很多内容,如果显示成一行就会很不好看,此时就需要换行了。看下面的例子:

需要显示的内容和位置:

<td id="longContentTd">一段很长的文字需要在这个td中显示,怎么让它换行呢?</td>

 处理的方法:

$(function(){
var content = jQuery.trim($("#longContentTd").text());//获取TD中的内容并去除左右空格
var len =10;//定义需要换行的字数(也就是当文字超过多少数字时换行以及每行显示的数量)
if(content.length!=0 && content.length>len){//超过指定数量则换行
    var contentStr = insertEnter(content,len);//拼接换行的字符串
    $("#longContentTd").html(contentStr);//添加到TD中
}
});

//长字符串中插入换行符
/*
str:需要换行的字符串
n:换行间隔字符数
*/
function insertEnter(str,n){
 var len = str.length;//获取字符的长度
 var strTemp = '';
 if(len > n){//如果字符的长度大于指定的长度
  strTemp = str.substring(0,n);//那么截取指定长度的字符串
  str = str.substring(n,len);//截取剩余的字符串
 //在截取的指定长度的字符串添加<br />标签实现换行并返回
  return strTemp+'<br />'+insertEnter(str,n);
 }else{
  return str;
 }
}

 要是不想用<br />等换行标签换行,只是简单实现“当超过指定长度时只显示指定长度的字符其他的用.....代替”功能时,则使用如下方法:

var contentStr = content.toString().substring(0,len)+"......";//拼接字符串
 
分享到:
评论

相关推荐

    JS实现在一个按钮上动态显示文字的效果

    ### JS实现在一个按钮上动态显示文字的效果 在前端开发中,通过JavaScript(简称JS)实现按钮上的动态文字效果是一种常见的交互方式。这种方式可以增强用户体验,使得页面更加生动有趣。本文将详细介绍如何利用JS...

    jquery实现多余文字显示或隐藏

    "jQuery实现多余文字显示或隐藏"这个主题就是关于如何利用JavaScript库jQuery来处理这种需求的。以下是一些关于如何使用jQuery来控制文本显示的核心知识点: 1. **jQuery库的引入**:首先,要在HTML文件中引入...

    javascript经典特效---奇特的文字显示信息.rar

    此压缩包文件“javascript经典特效---奇特的文字显示信息.rar”很可能包含了一个HTML文件“奇特的文字显示信息.htm”,这个文件可能是用来演示如何使用JavaScript来创建这种特效的。 JavaScript是一种轻量级的解释...

    文字回缩显示.rar

    例如,在JavaScript中,使用`innerHTML`或`textContent`设置元素内容时,如果字符串很长,可能会因为浏览器的自动换行机制导致部分文字无法显示。这时可以使用CSS的`white-space`属性来控制换行行为。 4. **浏览器...

    jQuery文字动画切换插件Adjector.js

    jQuery文字动画切换插件Adjector.js是一款专为网页设计师和开发者设计的高效工具,它利用JavaScript库jQuery的强大功能,为网页中的文本元素提供丰富多样的动态效果。这个插件可以轻松实现文字的平滑过渡、淡入淡出...

    finereport格式化金额函数js中进行数字超大金额千位符格式化处理.docx

    "finereport格式化金额函数js中进行数字超大金额千位符格式...finereport格式化金额函数在JS中进行数字超大金额千位符格式化处理可以使用tranNumber函数、toLocaleString()方法或slice、substr或substring方法来实现。

    select项内容过长解决办法

    这是一个很长很长的选项内容"&gt;简短显示 ``` 3. **自定义下拉框**:使用JavaScript库(如jQuery UI、Select2、Chosen等)或CSS/HTML5技术自定义下拉框样式。这些库提供了更高级的功能,如搜索、分页和自动调整...

    js文字截断

    本文将深入探讨JavaScript的文字截断方法,特别是使用"clamp.js"库的技巧。 首先,我们要理解JavaScript的基本文字截断原理。在JavaScript中,可以使用`substring`、`slice`或`substr`等字符串方法来截取字符串的一...

    js数字递增特效

    在给定的压缩包中,包含了一个`index.html`文件,这很可能是展示此特效的网页源代码,而`js`文件则可能包含了实现这一功能的JavaScript代码。 在JavaScript中,数字递增特效可以通过定时器(setTimeout或...

    鼠标移动到加号上显示隐藏的文字内容

    这是一段很长的文字,它可能会超出容器的宽度,所以我们需要对它进行... &lt;span class="show-more"&gt;+ 查看全部 ``` 在这个例子中,`&lt;div&gt;`元素包含了我们想要显示的文本和一个`&lt;span&gt;`元素,后者用于触发显示完整...

    jQuery input文本框限制文字输入计数显示

    本主题聚焦于如何使用jQuery来实现一个功能:在input文本框中限制用户输入的文字数量,并实时显示剩余可输入字符数。这个功能在很多场景下都非常实用,例如评论系统、表单填写等,可以有效地帮助用户控制输入内容的...

    JS实现至少包含字母、大小写数字、字符的密码等级的两种方法

    本文实例讲述了JS实现至少包含字母、大小写数字...那如何利用JS实现呢? 实现代码如下: function passwordLevel(password) { var Modes = 0; for (i = 0; i &lt; password.length; i++) { Modes |= CharMode(pass

    js实现的仿LED数字电子时钟效果.rar_js写led显示_js实现的仿LED数字电子时钟效果_paperqeu

    总的来说,这个项目结合了JavaScript的基本语法、时间处理、DOM操作、CSS样式和页面布局等多个方面,对于初学者来说是一个很好的实践项目,有助于提升实际开发技能。通过理解和实现这样的项目,开发者可以更好地掌握...

    javascript经典特效---IP地址的显示.rar

    在JavaScript编程领域,IP地址的显示是一个常见的需求,特别是在网页开发中处理网络数据时。本教程将深入探讨如何使用JavaScript实现这一功能。首先,我们需要理解IP地址的基本概念。IP(Internet Protocol)地址是...

    jQuery点击页面随机显示文字代码.zip

    为了实现随机显示文字,可能需要一个包含多个字符串的数组,然后利用JavaScript的`Math.random()`函数生成随机索引,选取数组中的一个字符串,再用`.html()`或`.text()`更新元素内容。 4. **随机数生成**:`Math....

    javascript经典特效---显示人口数量.rar

    在"javascript经典特效---显示人口数量.rar"这个压缩包中,我们可能找到了一个使用JavaScript来展示人口数量变化的示例。这样的效果通常用于数据可视化,帮助用户更直观地理解人口数据的增长或减少。 首先,...

    js代码实现左侧输入关键词右侧动态显示相关组合

    在JavaScript编程领域,动态组合和过滤功能是一种常见的需求,特别是在用户界面交互中,例如搜索建议、...这个压缩包的内容提供了一个很好的起点,帮助开发者了解如何使用JavaScript实现动态关键词组合显示的功能。

    jQuery文本框输入文字计数显示代码.zip

    "jQuery文本框输入文字计数显示代码.zip" 提供了一个解决方案,帮助开发者创建一个能够实时显示输入字符数的文本框,以此来限制用户的输入长度,提升用户体验,特别是在需要用户填写特定字数限制的表单场景下。...

    CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号

    这是一段很长的文字,需要被截断,超过两行后就显示省略号。无论有多少行,最终只会显示两行,剩余的会被省略... ``` 在上面的代码中,我们创建了一个CSS类`.multi-line-ellipsis`,并设置了`display: -webkit...

    VC实现中英文字定长分行处理

    在VC++编程环境中,"VC实现中英文字定长分行处理"是一个常见的需求,尤其是在创建用户界面或处理文本数据时。这个主题涉及到字符编码、字符串处理、控件使用以及可能的资源管理。以下是对这个话题的详细解释: 1. *...

Global site tag (gtag.js) - Google Analytics