自动换行前是这样的

从源码发现“打发的所发生的7”所在span跨行了,宽度为整行的宽度,不再是自身的实际宽度(一列时所占的宽度)

我的思路是要把这个换行元素前加上<br/>,使得该元素换行

$(".question").each(function(index,item){
dynamicWidth(index,item);
});
function dynamicWidth(index,item){
if($(item).children(".options").html()){//单选或多选
var totalWidth=0;
$(item).children(".options").each(function(index2,item2){
totalWidth+=$(item2).width();
if(totalWidth>$(".content").width()){
totalWidth=$(item2).width();
$(item2).prop('outerHTML',"<br/>"+$(item2).prop('outerHTML'));
}
});
}
}

但效果并不令人满意

在“打发的所发生的7”所在span元素前后各加了一个换行。为什么会这样呢?因为元素换行宽度固定了,

totalWidth=$(item2).width();

实际上得出的仍是换行宽度,必须重新遍历父元素所含子元素才能获取$(item2).width();的真实宽度。一旦出现换行就结束本次循环肯定是不可以的,因为不能保障下面的元素不会有换行需求。所以递归处理该元素是唯一正确思路。于是最终的解决办法:

$(".question").each(function(index,item){
dynamicWidth(index,item);
}); function dynamicWidth(index,item){
var f=true;
var item2=null;
if($(item).children(".options").html()){//单选或多选
var totalWidth=0;
$(item).children(".options").each(function(index2,item2){
totalWidth+=$(item2).width();
if(totalWidth>$(".content").width()){
totalWidth=$(item2).width();
$(item2).prop('outerHTML',"<br/>"+$(item2).prop('outerHTML'));
//获取当前循环的元素(已处理过),方便递归调用该元素。若从头开始循环或循环处理前的元素,则会死循环。因为跨行元素宽度固定,不会因为换行自动减小宽度
item2=$(".question:eq("+index+")");
f=false;
return f;
}
});
if(!f){
dynamicWidth(index,item2);
}
}
}

结果也很令人满意:

jsp选项过长自动换行的更多相关文章

  1. Saiku控制页面展示的数据过长自动换行(二十四)

    Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...

  2. VS 代码过长自动换行

    然后就需要设置自动换行.在VS上面的菜单栏中,选择 工具=>选项,出现选项对话框.   在对话框中,展开“文本编辑器”,然后选中“C#”,勾选右边的“自动换行“.   点击确定按钮.这样就可以看 ...

  3. Latex 表格内文字过长自动换行

    法一: [plain] view plaincopy \begin{tabular}{m{5cm}} 法二: [plain] view plaincopy \begin{tabular}{p{0.9\ ...

  4. css文本、字母、数字过长 自动换行处理

    ---恢复内容开始--- white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;white-space 属性设置如何处理元素内的空白norm ...

  5. JSP隐藏过长字段

    <div class="objDiv" title="${fof.fundName }">                        <c ...

  6. idea在springboot项目中没有【新建JSP选项】的解决方法

    https://blog.csdn.net/qq_26525215/article/details/53726690 转载于CSDN

  7. easyui-datagrid列的数据内容过长自动换行

    在datagrid中添加一句,DataGrid属性中的nowrap:false. (默认为true). JS文件: $('#_main_table').datagrid({ method:'get', ...

  8. table中td内容过长自动换行

    table { table-layout:fixed; WORD-BREAK:break-all;}

  9. JavaWeb——JSP开发1

    1.什么是jsp,为什么要使用jsp. 再使用idea创建完一个web工程后,在webapp目录下会生成一个index.jsp 直接编译运行,网站将自动打开这样一个网页: 所以我们可以推测这个inde ...

随机推荐

  1. idea debug只断点当前线程,不阻塞其他线程

    公司前后端分离,后端人员无需编写前端js ,后端开发调试某个数据的时候,前端总是嫌弃后端断点,影响到他开发.....idea早已提供这个功能,做下记录 选中你需要调试的控制器,其他控制器不会受到影响, ...

  2. Slava and tanks 877C

    C. Slava and tanks time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  3. C++复习:C++的类型转换

    C++的类型转换 1 类型转换名称和语法 C风格的强制类型转换(Type Cast)很简单,不管什么类型的转换统统是: TYPE b = (TYPE)a C++风格的类型转换提供了4种类型转换操作符来 ...

  4. linux 一种小的性能优化手段

    在编写内核模块的过程中,我们经常会创建percpu的hash表,比如定义结构如下: struct A { int a: int b: struct hlist_node   hlist_node;-- ...

  5. C++几个重要关键字(包含借鉴其他博主的东西)

    //内存 栈区 与 static区 ,C++为了兼容C,#include 只是文本替换,导致一堆命名空间之间的复杂问题,倍受人诟病 extern  关键字 1.基本含义:意如其名,告诉编译器声明的东西 ...

  6. python小实例一:简单爬虫

    本文所谓的爬虫就是通过本地远程访问url,然后将url的读成源代码形式,然后对源代码进行解析,获取自己需要的数据,相当于简单数据挖掘.本文实现的是将一个网页的图片爬出保存到本地的过程,例子很简单,用的 ...

  7. 福州大学软件工程W班-助教总结

    背景 福州大学软件工程W班,总人数46人,讲师汪老师. 前期期望 希望自己能够在课程当中起到引导作用,发挥助教最大的用处. 实际执行情况 第一个问题是自动化测试工具,该工具主要是用来测试程序WordC ...

  8. js 遍历行和列

    ]; //遍历列 ; i < table.rows[].cells.length; i++) { console.log(table.rows[].cells[i].innerText); ]. ...

  9. Python中的转换函数

    https://www.cnblogs.com/wuxiangli/p/6046800.html python中的字符数字之间的转换函数   int(x [,base ])         将x转换为 ...

  10. 如何解决cacti的snmp error

    第一,确定cacti所有的主机能ping通被监控主机:如果不能ping通,请确认网络配置和被监控主机的ip设置是否正确. 第二,如果能ping通,那么确认被监控主机是否启用snmpd服务: ps -e ...