`

使用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实现至少包含字母、大小写数字...那如何利用JS实现呢? 实现代码如下: function passwordLevel(password) { var Modes = 0; for (i = 0; i &lt; password.length; i++) { Modes |= CharMode(pass

    jQuery(js)获取文字宽度(显示长度)示例代码

    今天遇到了获取文字宽度的问题,查了很久,终于在一个国外网站上找到了方法,但是不能直接使用,于是修改了一下,成功使用到了项目中,在这里分享给大家。 首先在body标签最后添加一个子标签: 代码如下: ”ruler”&gt;...

    select项内容过长解决办法

    下拉框内容过长,挡住显示内容。 select内容过长,显示内容无法全部显示。 下拉框内容过长,显示内容无法全部显示。

    javascript代码常用大全

    2.3 长时间,形如 (2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空 3.2 多行文本框的值不能为空。 3.3 多行...

    javascript函数的解释

    javascript函数的解释,解释了具体函数的功能,一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document-&gt;html-&gt;(head,body) 4.一个浏览器窗口中的DOM顺序是:...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    web 视频播放器 js

    autoscroll(true,false):当播放列表过长的时候,默认会自动显示滚动条。当该值设置为’true’的时候,会自动根据鼠标滚动播放列表。 displaywidth(number of pixes):设置显示区域的宽度,当设置的比较小的时候,播放...

    javascript常用代码大全.html

    2.3 长时间,形如 (2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空 3.2 多行文本框的值不能为空。 3.3 多行文本框...

    CSS实现标题文字过长部分显示省略号的方法

    例如:15个字在iphone上面是两行显示,但是在三星上就可能不是两行显示了,有可能值显示一行,又或者在分辨率更低的手机15字已经是三行显示了,遇到了这种场景就很头痛了。先来回顾下,单行文本换行的写法: 复制...

    常用JS脚本页面判断

    2.3 长时间,形如 (2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空 3.2 多行文本框的值不能为空。 3.3 多行文本框...

    javascript 常用代码大全

    2.3 长时间,形如 (2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空 3.2 多行文本框的值不能为空。 3.3 多行...

    微信小程序之canvas 文字断行和省略号显示

    文字的多行处理在dom元素中很好办。但是canvas中没有提供方法,只有通过截取指定字符串来达到目的。 那么下面就介绍我自己处理的办法: wxml: &lt;canvas canvas-id='word' id='test'&gt;&lt;/canvas&gt; canvas肯定要一个画板...

    客户端统一验证JavaScript函数库及示例源码

    举例来说,浏览器窗口是一个对象,包含了几个文档对象,这些对象进而形成其他对象,依此类推,这个分级会变得很长。 由于面向对象的本质,JavaScript允许对象、对象的属性以及其事件都通过脚本来控制。也因为大部分...

    js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装

    弹出对话框形式的但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式共享给大家,如果大家使用有bug,请大家给我留言完善,谢谢了.js代码 代码如下: /** * 数据验证框架.增加了对id...

    最简单的ASP计数器

    该ASP程序实现了计数器数据的初始化、保存和读取。...也可以设定文字或图片的方式显示(displayMode设置为1为文字,2为图片),若设置为图片显示,请 自己网上搜索对应0-9的数字图片,并放于你需要的目录即可。

    JS 流程图 流程图插件

     多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上,流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件...

    JS实现中英文混合文字溢出友好截取功能

    在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。 ...

    Ecmascript-Sublime:ECMAScriptJavaScript语法(ES2015-ES2018,JSX,模板突出显示等)具有荒谬的特定范围

    对于那些较长的模板文字,启用嵌套语法突出显示并使代码片段更易于阅读可能会很有用。 您可以通过在模板文字之前添加块注释指令来启用此功能。 该指令的完整语法如下: /* syntax: {SYNTAX_NAME} */ tag? `contents...

    javascript 一个自定义长度的文本自动换行的函数

    很多朋友在制作网页过程中总是发现某些时候一些英文会把原来好好的表格撑开而导致变形,虽然可以使用style=”table-layout:fixed;word-wrap:break-word;word-break:break-all” 来解决这个问题,但有些时候会导致...

Global site tag (gtag.js) - Google Analytics