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


Posted in Javascript onMarch 16, 2017

由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法:

1:规定文字父容器的宽高,设置超出隐藏:overflo:“hidde”

-------缺点是会经常遇到最后一行文字显示不全的情况,建议在只控制一行文字显示的时候使用

2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

------缺点是火狐浏览器实现效果不好,会截断,页面不是有很多需要隐藏,建议使用

3:用jQuery限制字符字数

$(document).ready(function(){
//限制字符个数
$(“.word_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'…');
}
});
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 #Javascript
原生js更改css样式的两种方式
Mar 15 #Javascript
js清除浏览器缓存的几种方法
Mar 15 #Javascript
从零开始做一个pagination分页组件
Mar 15 #Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 #Javascript
javascript图片预览和上传(兼容IE)
Mar 15 #Javascript
轻松理解JavaScript之AJAX
Mar 15 #Javascript
You might like
zend framework文件上传功能实例代码
2013/12/25 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
房地产开盘策划方案
2014/02/10 职场文书
初中生操行评语大全
2014/04/24 职场文书
记者节感言
2015/08/03 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
详解Nginx 工作原理
2021/03/31 Servers
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技