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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
详解JavaScript执行模型
Nov 16 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
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
质量承诺书范文
2014/03/27 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
2014年客房部工作总结
2014/11/22 职场文书
家长反馈意见及建议
2015/06/03 职场文书
反腐倡廉观后感
2015/06/08 职场文书
人民币使用说明书
2019/04/17 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
Python OpenCV之常用滤波器使用详解
2022/04/07 Python