《div自动处理文字过长.doc》由会员分享，可在线阅读，更多相关《div自动处理文字过长.doc（22页珍藏版）》请在三一文库上搜索。
1、就是比如有一行文字，很长，表格内一行显示不下.white-space: nowrap;overflow: hidden;text-overflow: ellipsis;http:/ 作者:深山老林更新时间:2007-05-05点击:3769看到标题你一定很轻易就会想到截断文字加“.”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为似乎还有很多人不记得碰到这样的情况该如何处理。一般的文字截断（适用于内联与块）： Example Source Code .text-overflow display:block;/*内联对象需加*/width:31em;word-break:ke
2、ep-all;/* 不换行 */white-space:nowrap;/* 不换行 */overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(.) ；需与overflow:hidden;一起使用。*/对于表格文字溢出的定义： Example Source Code tablewidth:30em;table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */tdwidth:100%;word-break:keep-all;/* 不换行 *
3、/white-space:nowrap;/* 不换行 */overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(.) ；需与overflow:hidden;一起使用。*/ 需要你注重的是，这个东东只对单行的文字的效，假如你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“.”，其它的浏览器文本超出指定宽度时会隐藏。、 .amain width: 100%; height: 563px; .select background-color: #dde5f2; height: 39
4、px; width: 100%; border-bottom-color: #0137a3; border-bottom-style: solid; border-bottom-width: 4px; .show overflow-y: auto; height: auto; width: 100%; border-color: #a0c0fb; border-style: solid; border-width: 1px; .show_line .show_line ul li list-style: none; .show_line ul li margin-top: 5px; .oper
5、ate width: 53px; height: 23px; background-color: #ced5e5; float: right; border-left-color: #ffffff; border-left-style: solid; border-left-width: 1px; text-align: center; .finish margin-top: 20px; background-image: url(./Image/finish0.png); text-align: center; margin-bottom: 30px; .subject_title padd
6、ing-top: 20px; height: 22px; text-align: center; font-size: 14px; color: #f73c11; font-weight: bold; .subject_detail width:717px; font-size: 12px; text-align: left; color: #494949; margin-top: 10px; margin-left: 10px; height:auto; .state color: Gray; margin-top: 10px; text-align: center; .topic marg
7、in-top: 20px; margin-bottom: 215px; margin-left: 10px; .addnew clear: both; margin-top: 30px; margin-left: 10px; color: #064b84; font-family: 黑体; /*text-decoration: underline;*/ .addnew1 margin-top: 10px; margin-left: 15px; .add .operate0 visibility: visible; clear: both; height: 23px; width: 100%;
8、border-bottom-color: #c9c9c9; border-bottom-style: solid; border-bottom-width: 1px; .input margin-left: 10px; margin-right: 10px; .buttom1 width: 75px; height: 27px; margin-left: 25px; padding-bottom: 0px; .header margin-left: 15px; width: 472px; color: #999; .display height: auto; margin-left: 10px
9、; margin-right: 10px; margin-top: 15px; padding-bottom: 20px; /* border-color: Gray; border-style: dashed; border-width: 1px;*/ .qtitle clear: left; .question width: 96%; height: auto; padding-top: 6px; padding-right: 4px; padding-left: 4px; padding-bottom: 8px; clear: both; margin-left: auto; margi
10、n-right: auto; margin-top: 2px; margin-bottom: 2px; font-size: 12px; .editQuestion width: 96%; height: auto; padding-top: 6px; padding-right: 4px; padding-left: 4px; padding-bottom: 8px; clear: both; margin-left: auto; margin-right: auto; margin-top: 2px; margin-bottom: 2px; font-size: 12px; border-
11、color: Olive; border-width: 2px; border-style: solid; .question_line margin-left: 20px; margin-top: 5px; .question_line ul .subject_identity_select margin-left: 20px; margin-top: 5px; padding-bottom: 5px; .note margin-left: 5px; color: Red; .subject_identity_select ul clear: both; .subject_identity_
12、select ul li width: 24%; height: 20px; float: left; ul, li list-style-type: none; ul margin-left: 0px; margin-top: 0px; margin-bottom: 0px; padding-left: 0px; .blank margin-right: 30px; .inputText width: 140px; color: #999999; .showPaper height: auto; margin-left: 10px; margin-right: 10px; margin-to
13、p: 15px; padding-bottom: 20px; border-color: Gray; border-style: dashed; border-width: 1px; $(function () /将滚动条滚到底部 var a = $(#div_Show); if (a0.clientHeight 350) a.css(height, 350px); $(.question).mouseover(function () ); $(#cboxMline).click(function () if ($(#cboxMline)0.checked = true) if ($(#tih
14、ao1)0.title = 1) $(#div_SOption)0.className = question_line; /.removeChild($(#rul)0.childNodesoptioncount - 1); /.remove()append( + else $(#div_MOption)0.className = question_line; /.removeChild($(#mul)0.childNodesoptioncount - 1); else if ($(#tihao1)0.title = 1) $(#div_SOption)0.className = subject
15、_identity_select; /.removeChild($(#rul)0.childNodesoptioncount - 1); /.remove()append( + else $(#div_MOption)0.className = subject_identity_select; /.removeChild($(#mul)0.childNodesoptioncount - 1); ); $(#delOption).click(function () /根据题目类型生成选项 if ($(#tihao1)0.title = 1) var optioncount = $(#rul)0.
16、childNodes.length; if (optioncount = 0) return; $(#rul)0.removeChild($(#rul)0.childNodesoptioncount - 1); /.remove()append( + else var optioncount = $(#mul)0.childNodes.length; if (optioncount = 0) return; $(#mul)0.removeChild($(#mul)0.childNodesoptioncount - 1); ); $(#newOption).click(function () /
17、根据题目类型生成选项 if ($(#tihao1)0.title = 1) /单选 var optioncount = $(#rul)0.childNodes.length + 1; $(#rul).append( + ); else if ($(#tihao1)0.title = 2) var optioncount = $(#mul)0.childNodes.length + 1; $(#mul).append( + ); ); /保存 $(#saveQ).click(function () clearPrompt(); /alert(保存成功); /updateQuestion(); $
18、(#div_AddQ).css(display, none); var str = saveQ(); if (str = -1) alert(保存失败); return; ); $(#cancelEdit).click(function () $(#div_AddQ).css(display, none); ); /单选 $(#single).click(function () /alert(单选); clearPrompt(); $(#div_AddQ).css(display, block); $(#div_SOption).css(display, block); $(#div_MOpt
19、ion).css(display, none); /设置选项类型 /$(#newOption)0.title = single; /$(#delOption)0.title = single; $(#tihao1)0.title = 1; var questionCount = $(divid=sdiv_); $(#tihao1)0.innerText = questionCount.length + 1; /选项单行或多行显示 if ($(#div_SOption)0.className = question_line) $(#cboxMline)0.checked = true; else
20、 $(#cboxMline)0.checked = false; ); /多选 $(#multiple).click(function () /alert(多选); clearPrompt(); $(#div_AddQ).css(display, block); $(#div_MOption).css(display, block); $(#div_SOption).css(display, none); $(#tihao1)0.title = 2; var questionCount = $(divid=sdiv_); $(#tihao1)0.innerText = questionCount.length + 1; /选项单行或多行显示 if ($(#div_MOption)0.className = question_l