≡
  • 网络编程
  • 数据库
  • CMS技巧
  • 软件编程
  • PHP笔记
  • JavaScript
  • MySQL
位置:首页 > 网络编程 > HTML

html 解决div中文字内容溢出问题

人气:946 时间:2018-10-26

这篇文章主要为大家详细介绍了html 解决div中文字内容溢出问题,具有一定的参考价值,可以用来参考一下。

感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!

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

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()+'…');
}
});
});

本文来自:http://www.q1010.com/175/2691-0.html

注:关于html 解决div中文字内容溢出问题的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。

关键词:溢出

您可能感兴趣的文章

  • JS 解决图片太大溢出问题、CSS 限制图片最大宽度、图片按比例自动缩放
上一篇:HTML Bootstrap表格制作代码
下一篇:html 实现pre标签内容自动换行
热门文章
  • HTML5 文本内容显示三行,多余部分显示...,点击全部展开
  • HTML,CSS,font-family:中文字体和英文名称对照表
  • html 回到顶部的完整代码
  • 百度编辑器ueditor自动排版首行缩进四个字符实现方法
  • HTML 为元素添加一些透明度的简单方法
  • HTML/CSS 实现div居中、div内部元素垂直居中的简单示例
  • HTML 在textarea中选择文本的实现方法
  • CSS分页符示例
  • 【推荐】DIV+CSS入门菜鸟教程
  • HTML 点击超链接在iframe框架显示的实现方法
  • 最新文章
    • css实现移动端禁止手机长按图片弹出保存图片
    • 鼠标拖动DIV元素的实现方法
    • html 标签随机变色大小的简单示例
    • HTML 在textarea中选择文本的实现方法
    • CSS分页符示例
    • HTML 为元素添加一些透明度的简单方法
    • html 回到顶部的完整代码
    • HTML5 文本内容显示三行,多余部分显示...,点击全部展开
    • HTML/CSS 实现div居中、div内部元素垂直居中的简单示例
    • HTML,CSS,font-family:中文字体和英文名称对照表

四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。