jsp选项过长自动换行
自动换行前是这样的
从源码发现“打发的所发生的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选项过长自动换行的更多相关文章
- Saiku控制页面展示的数据过长自动换行(二十四)
Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...
- VS 代码过长自动换行
然后就需要设置自动换行.在VS上面的菜单栏中,选择 工具=>选项,出现选项对话框. 在对话框中,展开“文本编辑器”,然后选中“C#”,勾选右边的“自动换行“. 点击确定按钮.这样就可以看 ...
- Latex 表格内文字过长自动换行
法一: [plain] view plaincopy \begin{tabular}{m{5cm}} 法二: [plain] view plaincopy \begin{tabular}{p{0.9\ ...
- css文本、字母、数字过长 自动换行处理
---恢复内容开始--- white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;white-space 属性设置如何处理元素内的空白norm ...
- JSP隐藏过长字段
<div class="objDiv" title="${fof.fundName }"> <c ...
- idea在springboot项目中没有【新建JSP选项】的解决方法
https://blog.csdn.net/qq_26525215/article/details/53726690 转载于CSDN
- easyui-datagrid列的数据内容过长自动换行
在datagrid中添加一句,DataGrid属性中的nowrap:false. (默认为true). JS文件: $('#_main_table').datagrid({ method:'get', ...
- table中td内容过长自动换行
table { table-layout:fixed; WORD-BREAK:break-all;}
- JavaWeb——JSP开发1
1.什么是jsp,为什么要使用jsp. 再使用idea创建完一个web工程后,在webapp目录下会生成一个index.jsp 直接编译运行,网站将自动打开这样一个网页: 所以我们可以推测这个inde ...
随机推荐
- idea debug只断点当前线程,不阻塞其他线程
公司前后端分离,后端人员无需编写前端js ,后端开发调试某个数据的时候,前端总是嫌弃后端断点,影响到他开发.....idea早已提供这个功能,做下记录 选中你需要调试的控制器,其他控制器不会受到影响, ...
- Slava and tanks 877C
C. Slava and tanks time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- C++复习:C++的类型转换
C++的类型转换 1 类型转换名称和语法 C风格的强制类型转换(Type Cast)很简单,不管什么类型的转换统统是: TYPE b = (TYPE)a C++风格的类型转换提供了4种类型转换操作符来 ...
- linux 一种小的性能优化手段
在编写内核模块的过程中,我们经常会创建percpu的hash表,比如定义结构如下: struct A { int a: int b: struct hlist_node hlist_node;-- ...
- C++几个重要关键字(包含借鉴其他博主的东西)
//内存 栈区 与 static区 ,C++为了兼容C,#include 只是文本替换,导致一堆命名空间之间的复杂问题,倍受人诟病 extern 关键字 1.基本含义:意如其名,告诉编译器声明的东西 ...
- python小实例一:简单爬虫
本文所谓的爬虫就是通过本地远程访问url,然后将url的读成源代码形式,然后对源代码进行解析,获取自己需要的数据,相当于简单数据挖掘.本文实现的是将一个网页的图片爬出保存到本地的过程,例子很简单,用的 ...
- 福州大学软件工程W班-助教总结
背景 福州大学软件工程W班,总人数46人,讲师汪老师. 前期期望 希望自己能够在课程当中起到引导作用,发挥助教最大的用处. 实际执行情况 第一个问题是自动化测试工具,该工具主要是用来测试程序WordC ...
- js 遍历行和列
]; //遍历列 ; i < table.rows[].cells.length; i++) { console.log(table.rows[].cells[i].innerText); ]. ...
- Python中的转换函数
https://www.cnblogs.com/wuxiangli/p/6046800.html python中的字符数字之间的转换函数 int(x [,base ]) 将x转换为 ...
- 如何解决cacti的snmp error
第一,确定cacti所有的主机能ping通被监控主机:如果不能ping通,请确认网络配置和被监控主机的ip设置是否正确. 第二,如果能ping通,那么确认被监控主机是否启用snmpd服务: ps -e ...