jQuery实现控制文字内容溢出用省略号(…)表示的方法

本文实例讲述了jQuery实现控制文字内容溢出用省略号(…)表示的方法。分享给大家供大家参考，具体如下：

jQuery限制字符字数的方法

$(function(){
 //限制字符个数
$(".text").each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(this).html()+'…');
}
});
});
<div class="text" style="width:150px;">你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，天啊！</div>
<div class="text" style="width:150px;">你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，天啊！</div>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • div中文字内容溢出常见的解决方法

    由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法: 1:规定文字父容器的宽高,设置超出隐藏:overflo:"hidde" -------缺点是会经常遇到最后一行文字显示不全的情况,建议在只控制一行文字显示的时候使用 2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all: text-overflow:ellipsis; -o-text-overflow:elli

  • 文字溢出实现溢出的部分再放入一个新生成的div中具体代码

    看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的div中, 想了一下原理,就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • 小技巧处理div内容溢出

    前几天遇到一个问题,代码是这样一个层次: 复制代码 代码如下: <div class="province">    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul></div> 我设置了div的边框, 要想ul的内容在边框内, 必须设置div高度. 但是,ul内的内容是变化的,内容少

  • jQuery实现控制文字内容溢出用省略号(…)表示的方法

    本文实例讲述了jQuery实现控制文字内容溢出用省略号(-)表示的方法.分享给大家供大家参考,具体如下: jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(".text").each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(th

  • jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    本文实例讲述了jQuery通过控制节点实现仅在前台通过get方法完成参数传递.分享给大家供大家参考.具体分析如下: 这样也是HTML DOM那部分的内容,javascript与jquery等前端脚本语言的核心就是要控制每一个节点,对每一个节点进行增删改查,这样才能够真正地活用javascript与jquery等前端脚本写出一个又一个华丽丽的东西. javascript控制节点,笔者已经在之前的[JavaScript针对网页节点的增删改查用法实例]有过相关介绍,现在是通过jquery这一javas

  • 控制文字内容的显示与隐藏示例

    复制代码 代码如下: <a href="javascript:void(0);" id="open" onclick="document.getElementById('content').style='display:block'; document.getElementById('open').style='display:none'; document.getElementById('hidden').style='display:block;

  • javascript实现控制文字大中小显示

    部分网站内容页通常会看到有控制文字分别以 大,中,小 三种方式显示,下面就把这个小功能做一下记录,对提高网站用户体验度还是有一些帮助的哦! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js控制文字大中小显示</title> </head> <body&g

  • js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法

  • jQuery实现图片文字淡入淡出效果

    jQuery实现图片文字淡入淡出效果

    本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.

  • jQuery实现的文字逐行向上间歇滚动效果示例

    jQuery实现的文字逐行向上间歇滚动效果示例

    本文实例讲述了jQuery实现的文字逐行向上间歇滚动效果.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery文字逐行向上滚动代码</title> <link href="css/index.css" rel=&quo

  • jQuery实现的文字hover颜色渐变效果实例

    本文实例讲述了jQuery实现的文字hover颜色渐变效果.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.j

  • jQuery文字提示与图片提示效果实现方法

    jQuery文字提示与图片提示效果实现方法

    本文实例讲述了jQuery文字提示与图片提示效果实现方法.分享给大家供大家参考,具体如下: 1.效果如图: 2.文字提示代码: <script type="text/javascript"> //<![CDATA[ $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = &q

随机推荐