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 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
puppeteer库入门初探
Jan 09 Javascript
详解Vue 单文件组件的三种写法
Feb 19 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
对javascript和select部件的结合运用
2006/10/09 PHP
php创建多级目录代码
2008/06/05 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
javascript 验证日期的函数
2010/03/18 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
angularjs下拉框空白的解决办法
2017/06/20 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python:print格式化输出到文件的实例
2018/05/14 Python
python高阶爬虫实战分析
2018/07/29 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
介绍一下OSI七层模型
2012/07/03 面试题
行政总监岗位职责
2013/12/05 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
2016新年致辞
2015/08/01 职场文书