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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 小技巧处理div内容溢出

    前几天遇到一个问题,代码是这样一个层次: 复制代码 代码如下: <div class="province">    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul></div> 我设置了div的边框, 要想ul的内容在边框内, 必须设置div高度. 但是,ul内的内容是变化的,内容少

  • jQuery实现控制文字内容溢出用省略号(…)表示的方法

    本文实例讲述了jQuery实现控制文字内容溢出用省略号(-)表示的方法.分享给大家供大家参考,具体如下: jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(".text").each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(th

  • 文字溢出实现溢出的部分再放入一个新生成的div中具体代码

    看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的div中, 想了一下原理,就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

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

    由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法: 1:规定文字父容器的宽高,设置超出隐藏:overflo:"hidde" -------缺点是会经常遇到最后一行文字显示不全的情况,建议在只控制一行文字显示的时候使用 2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all: text-overflow:ellipsis; -o-text-overflow:elli

  • jQueryMobile之窗体长内容的缺陷与解决方法实例分析

    jQueryMobile之窗体长内容的缺陷与解决方法实例分析

    本文实例讲述了jQueryMobile窗体长内容的缺陷与解决方法.分享给大家供大家参考,具体如下: 前面的一篇文章<jQueryMobile之Helloworld与页面切换的方法>没有考虑到窗体中放置长内容的状况 一旦窗体中出现长内容,使用笔者那种固定header与footer的全屏布局是存在缺陷的, 如图所示,长内容最后的内容,直到滚动条拉到最底部也无法穷尽, 而且很有可能的是,虽然现在这个地方的内容是显示为半透明,但往往这个位置是一些提交按钮什么的, 用户根本就没法点, 因此,需要进行改进

  • 有关tomcat内存溢出的完美解决方法

    tomcat内存溢出设置JAVA_OPTS 答案1 设置Tomcat启动的初始内存 其初始空间(即-Xms)是物理内存的1/64,最大空间(-Xmx)是物理内存的1/4.可以利用JVM提供的-Xmn -Xms -Xmx等选项可 进行设置 三.实例,以下给出1G内存环境下java jvm 的参数设置参考: JAVA_OPTS="-server -Xms800m -Xmx800m -XX:PermSize=64M -XX:MaxNewSize=256m -XX:MaxPermSize=128m -D

  • jQuery实现将div中滚动条滚动到指定位置的方法

    本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div

  • PHP编程中的Session阻塞问题与解决方法分析

    本文实例讲述了PHP编程中的Session阻塞问题与解决方法.分享给大家供大家参考,具体如下: 使用session过程中,在开启session后,同一浏览器,执行同一程序,不同页面会被锁.不同浏览器不会出现这种情况. 疑问:是不是session_start导致了阻塞? 于是,我写了几个页面测试了一下,发现是session导致了阻塞,而其他两种情况不会造成阻塞. 查了下PHP的Bug列表,发现有人提出了这个问题: Description: ------------ Calling session_

  • Android开发中听筒无法播放音乐的解决方法

    本文实例讲述了Android开发中听筒无法播放音乐的解决方法.分享给大家供大家参考,具体如下: 这个问题让我蛋疼了,既然百度也木有资料. 耗时的主要原因是因为权限不足时,而没有终止程序,只用了一小行日志提醒,没有看到 用听筒播放很简单 AudioManager.setMode(AudioManager.MODE_IN_CALL) //设定为通话中即可 还是这一句代码的事,不过记得要加上权限 Android.permission.MODIFY_AUDIO_SETTINGS 不然会像我一样蛋疼半天

  • Vmware中桥接无法获取IP的解决方法

    Vmware设置虚拟操作系统网卡为桥接模式后,本应该和本地网卡获取到同一网段的IP的,但现在突然无法获取到IP设置,原因是什么呢?经过查看,发现Vmware中的网络编辑器中的桥接网卡桥接到了一个虚拟网卡上,更改到物理网卡后,虚拟机中的操作系统就获取到了地址,点[编辑]-- [虚拟网络编辑器] – [更改设置] – 选中VMnet0,类型为桥接模式的那个卡,在已桥接至后边,选择你的物理网卡,如图: Vmware设置虚拟操作系统网卡为桥接模式后,本应该和本地网卡获取到同一网段的IP的,但现在突然无法

  • JavaScript中Textarea滚动条不能拖动的解决方法

    本文实例分析了JavaScript中Textarea滚动条不能拖动的解决方法.分享给大家供大家参考,具体如下: 在IE中,你是否碰到过Textarea的滚动条不能拖动,但点上下按钮可以滚动内容? 这个问题的原因很可能就是在该Textarea中绑定了onfocus事件,但是,基于某种条件,又将其焦点去掉(即blur()),这样就导致滚动条不能拖动. 一个典型的例子为: me.$input.on("focus",function(){ if ($isIE && me.ena

  • javaBean的基础知识及常见乱码解决方法

    javaBean的基础知识及常见乱码解决方法 乱码问题应该是做javaWeb开发人员都遇到过的问题吧,这个问题当时还影响了我学习Java的想法,甚至有过想放弃的想法,没办法,当时年轻,呵呵.其实产生乱码问题的原因有很多,解决乱码的问题也有很多,现在就一一来看一下: 出现乱码的地方大致可以分为以下三种: 1 jsp页面中 2 jsp页面之间相互传参的参数 3 与数据库中数据的存取 解决方案大致可以分为三种: 1 出现在jsp页面中,是由于没有设置jsp页面的中文字符编码.   2 出现在jsp页面

随机推荐