DIV内容超出固定宽度部分用省略号代替
方法一: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内容超出固定宽度部分用省略号代替的更多相关文章
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- div内容超出后自动显示滚动条
一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不 ...
- 超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容
一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ wi ...
- 几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等
1 div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...
- html内容超出了div的宽度如何换行让内容自动换行
在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要将其换行,实现的css代码如下 在工作中评论内容测试遇到评论着的评论内容为:"dddddddddd ...
- div 内容宽度自适应、超出后换行
div 内容宽度自适应,超出后换行 { max-width:100%;width: fit-content;width: -webkit-fit-content;width: -moz-fit-con ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- Html table 内容超出显示省略号
内容超出显示省略号: <html> <style> table { table-layout: fixed; width: 100%; } table, th, td { bo ...
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
随机推荐
- 【网页布局基础】css布局学习总结
三种定位机制 1.标准文档流:从上到下,从左到右输出文档内容 2.浮动 3.绝对定位 需要注意的是块级元素如div p ul 等 行级元素如span strong img input等 块级元素与行级 ...
- 4、Python 基础类型 -- Tuple 元祖类型
Python 元组 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: 实例(P ...
- Collections 工具类常见方法
Collections 工具类常用方法: 排序 查找,替换操作 同步控制(不推荐,需要线程安全的集合类型时请考虑使用 JUC 包下的并发集合) 排序操作 void reverse(List list) ...
- 超实用的HTML代码段(赵荣娇)
第1章 创建HTML文档 11.1 HTML文档的基本结构 2 <html> <head> <title>Title of page</title> & ...
- Openstack贡献者须知 — OpenPGP/SSH/CLA贡献者协议
目录 目录 前言 Openstack基金委员会 Openstack贡献者须知 注册Openstack In Launchpad 生成并上传OpenPGP密钥 生成并上传SSH公钥 Join The O ...
- maven学习整理-进阶知识
在maven的阶知识主要学习的是maven在eclipse中的使用.依赖相关的问题.继承(父子工程).统一版本管理.聚合等相关知识 1.maven在eclipse中的使用 由上篇基础知识学习到怎样下载 ...
- CentOS6.8搭建LNMP环境
selinux可能会致使编译安装失败,我们先禁用它.永久禁用,需要重启生效 sed -i ‘s/SELINUX=enforcing/SELINUX=disabled/g’ /etc/selinux/c ...
- 1.1 React 介绍
1.1.1 React 是什么 React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 来自:React 官方网站 狭义来讲 React ...
- 20140730 word标题样式 数组
1.word 标题四, 右键更新 自己也可以新建标题样式 2.数组 连续内存,空间复杂度高(即使数组存在一个元素,占据的空间的大小不变),时间复杂度低(0(1)访问),内存分配一次性完成
- Fedora 25技巧
shell界面按F5插入-(波浪号,HOME) 同一个应用不同窗口切换alt + `