CSS设计常见问题收集（三）

1. 长文字自动换行：
   IE的代码：div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}Firefox下的代码（使用js）：function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord(37)
2. 一行内文本超出指定宽度溢出的处理：
   一般的文字截断（适用于inline与block元素）：.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}对于表格文字溢出的定义：table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
} 这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。
3. list-style-image无法准确定位的问题
   li { list-style:url("arrowb.gif"); }
li a { position:relative; top:-5px; font:12px/25px 宋体; }另外一种方法是使用li的背景图像来模拟。
4. 对齐文本与文本输入框
   现象：
   
   设置文本框的vertical-align:middle 就可以了。

参考文章：
• web标准常见问题集合