方法一:CSS控制溢出文本  只针对DIV单行数据展示

/** DIV文本超出宽度部分用...替换,鼠标移上显示全部 **/
.textAuto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.textAuto:hover{overflow:visible;text-overflow:ellipsis;white-space:normal;}

结合上面CSS样式(需要屏蔽.textAuto:hover样式) 如果文本宽度超出DIV宽度  鼠标移上去用Title形式显示全部内容几秒钟

 $('.textAuto').live("mouseover", function() {
if (this.offsetWidth < this.scrollWidth) {
$(this).attr("title", $(this).text());
}
});

方法二: JS控制字符长度

var content = "DIV内容溢出只显示多少字节,多余部分用...代替";
var numCnt = content.gblen();
var elseCont='';
if(parseInt(numCnt)>=72){
elseCont = content.gbelse(72); //多余部分文本
content = content.gbstr(72)+"..."; //展示出来文本
}
<div style="padding-top:0px;" class="test test2">
  <p class="p">'+展示部分文本+'</p>
  <p class="mytext" style="display:none;">'+多余部分文本+'</p>
</div>';

$('.test').live("mouseover", function() {
    $(this).children('.p').text($(this).children('.p').text().replace('...',''));
    $(this).children('.mytext').show();
  });

$('.test').live("mouseout", function() {
    $(this).children('.p').text($(this).children('.p').text()+'...');
    $(this).children('.mytext').hide();
  });

 

考虑到DIV文本内容可能有数字字母汉字混合,字节长度不同就会影响计算文本对应DIV宽度 1个汉字长度=2个字母长度=2个数字长度

 //返回字符的[字节]长度    1个汉字=2个字节长度  列表DIV文本溢出时用来判断字符(中英混合)长度
String.prototype.gblen = function() {
var len = 0;
for (var i=0; i<this.length; i++) {
if (this.charCodeAt(i)>127 || this.charCodeAt(i)==94) {
len += 2;
} else {
len ++;
}
}
return len;
}
//根据非汉字[字节]长度标准 返回--指定长度的字符
String.prototype.gbstr = function(size) {
var len = 0;
var str = "";
for (var i=0; i<this.length; i++) {
if (this.charCodeAt(i) > 127 || this.charCodeAt(i) == 94) {
len+=2;
str+=this[i];
} else {
len++;
str+=this[i];
}
if(len>=size){
return str;
}
}
return str;
}
//根据非汉字[字节]长度标准 返回--指定长度后剩余的字符
String.prototype.gbelse = function(size) {
var len = 0;
var str = "";
for (var i=0; i<this.length; i++) {
if (this.charCodeAt(i) > 127 || this.charCodeAt(i) == 94) {
len+=2;
if(len>size){
str+=this[i];
}
} else {
len++;
if(len>size){
str+=this[i];
}
}
}
return str;
}

DIV内容超出固定宽度部分用省略号代替的更多相关文章

  1. DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  2. div内容超出后自动显示滚动条

    一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不 ...

  3. 超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容

    一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ wi ...

  4. 几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

  5. html内容超出了div的宽度如何换行让内容自动换行

    在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要将其换行,实现的css代码如下   在工作中评论内容测试遇到评论着的评论内容为:"dddddddddd ...

  6. div 内容宽度自适应、超出后换行

    div 内容宽度自适应,超出后换行 { max-width:100%;width: fit-content;width: -webkit-fit-content;width: -moz-fit-con ...

  7. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  8. Html table 内容超出显示省略号

    内容超出显示省略号: <html> <style> table { table-layout: fixed; width: 100%; } table, th, td { bo ...

  9. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

随机推荐

  1. PHP-在排序数组中查找元素的第一个和最后一个位置

    给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标值,返回 [ ...

  2. 小白的第一篇python博客

    学习python课程三天,先了解了计算机的历史及各种发展史,python的历史及部分语法,python主要学习内容有"hello world",int常量.str字符串,print ...

  3. C++子类的构造函数后面加:冒号的作用(转)

    在C++类的构造函数中经常会看到如下格式的写法: MyWindow::MyWindow(QWidget* parent , Qt::WindowFlags flag) : QMainWindow(pa ...

  4. Oracle多表更新及MERGE命令和闪回机制还原数据表

    一.多表更新 比如线上有个系统由于某一个模块出现异常,导致系统整体的数据出现了错误,需要你手动改写数据库错误,Oracle update语句更新的值来自另一张表 update语法最基本的格式为 UPD ...

  5. Employment Planning

    Employment Planning 有n个月,每个月有一个最小需要的工人数量\(a_i\),雇佣一个工人的费用为\(h\),开除一个工人的费用为\(f\),薪水为\(s\),询问满足这n个月正常工 ...

  6. 转载 如何理解API,API 是如何工作的

    本文转载于https://blog.csdn.net/cumtdeyurenjie/article/details/80211896 感谢作者 仁杰兄 大家可能最近经常听到 API 这个概念,那什么是 ...

  7. PHP ftp_nb_get() 函数

    定义和用法 ftp_nb_get() 函数从 FTP 服务器上下载一个文件并保存到本地一个文件中.(无阻塞) 该函数返回下列值之一: FTP_FAILED(发送/获取失败) FTP_FINISHED( ...

  8. Shiro学习(19)动态URL权限限制

    用过spring Security的朋友应该比较熟悉对URL进行全局的权限控制,即访问URL时进行权限匹配:如果没有权限直接跳到相应的错误页面.Shiro也支持类似的机制,不过需要稍微改造下来满足实际 ...

  9. NX二次开发-基于MFC界面对话框与NX交互的开发

    打开VS2013 点击新建,选择MFC DLL 点击确定 点下一步 什么都不改,直接点完成 进来之后先编译一下,看是否编译成功 打开项目属性,更改这几处 $(UGII_BASE_DIR)\ugopen ...

  10. JS中的call()、apply() 以及 bind()方法用法总结

    JS中的call()方法和apply()方法用法总结  : 讲解: 调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. function add(c,d){ return thi ...