最近在做页面测试时候发现td内文字过多，会撑开div，造成版面错乱。
 
解决办法：给td加样式如下
 
style="word-wrap:break-word; word-break:break-all;"
 
word-wrap:设置或检索当当前行超过指定容器的边界时是否断开转行
 
取值：
 
normal :　 默认值。允许内容顶开指定的容器边界
 
break-word :　 内容将在边界内换行。如果需要，词内换行( word-break )也将发生
 
word-break:设置或检索对象内文本的字内换行行为。尤其在出现多种语言时
 
取值
 
normal :　 默认值。允许在词间换行
 
break-all :　 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
 
keep-all :　 与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

 
一个学习使用的笔记实例，用纯css 实现css 文字自动换行并垂直居中div效果,这样就像表格一样可以实现不管多少内容都可以居中显示了哦。
demo
 
.box {
 
position: relative;
 
width: 500px;
 
height: 300px;
 
border: 1px solid #FFF;
 
background-color: #999;
 
display: table;
 
}
 
.wrap{
 
display: table-cell;
 
vertical-align: middle;
 
*position:absolute;
 
*top: 50%;
 
*left: 0;
 
}
 
.content {
 
*position: relative;
 
*top: -50%;
 
*left: 0;
 
}
 

  

   
我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
   
固定宽度的文字自动换行并垂直剧中">固定宽度的文字自动换行并垂直剧中
  
 
 

  

   
是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
  
 
 
在线演示

 
html {overflow-y:auto}
 
body{background: transparent;}
 
.stastyle {
 
height:50px;
 
vertical-align: middle;
 
line-height: normal;
 
width:100px;
 
margin:10px 8px 0px 0px;
 
float:left;
 
border:solid 1px #1e88e5;
 
background:#123660;
 
color:#ffffff;
 
overflow: hidden;
 
text-align: center;
 
}
 
.stastyle:hover {
 
background:#315d8f;
 
cursor:pointer;
 
}
 
.sleft {
 
margin-top: 12px;
 
display: inline-block;
 
position: relative;
 
overflow: hidden;
 
padding: 0;
 
vertical-align: top;
 
}
 
.stext {
 
display: inline-block;
 
vertical-align: top;
 
width: auto;
 
line-height: 24px;
 
font-size: 12px;
 
padding: 0;
 
margin: 0 4px;
 
}
 
$(function(){
 
var goalIndexId='${indexId}';
 
var goalUnitId='${unitId}';
 
seledarea(goalIndexId,goalUnitId);
 
});
 
//展现选中区域各台数据
 
function seledarea(indexId,unitId){
 
$.ajax({
 
type:"post",
 
url : "${ctx}/tousu/getseledarea",
 
data:{
 
"unitId":unitId
 
},
 
success:function(data){
 
$('#station').empty();
 
if(data.showtabel!=""){
 
for(var i=0;i
 
createstadiv(data.showtabel[i]);
 
}
 
}
 
}
 
});
 
}
 
function createstadiv(showtabel){
 
var name = showtabel.name;
 
var id = showtabel.id;
 
var html = "";
 
html = "
 

  "+name+"
 
";
 
//html = ""+name+"";
 
$('#station').append(html);
 
//$.parser.parse("#station");
 
}
 
function onStaclick(unitid,name){
 
parent.setParams();
 
parent.parent.setGoalUnitId(unitid,true);
 
}

文字不换行且有省略号：
 
.ellipsis-element{
  white-space:nowrap;
  text-overflow:ellipsis;
  word-break:break-all;
  overflow:hidden;
}
 
自动换行：
 
.autoline-element{
            white-space:normal;
            word-wrap:break-word;
            word-break:break-all
        }
 
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
 
white-space: 属性设置如何处理元素内的空白
 
normal: 默认。空白会被浏览器忽略。
pre:空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 br标签为止。
pre-wrap: 保留空白符序列，但是正常地进行换行。
pre-line: 合并空白符序列，但是保留换行符。
inherit: 规定应该从父元素继承 white-space 属性的值。
 
word-wrap: normal|break-word;
 
word-wrap: 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
 
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word: 在长单词或URL地址内部进行换行
 
word-break: normal|break-all|keep-all;
 
word-break 属性用来标明怎么样进行单词内的断句。
 
normal：使用浏览器默认的换行规则。
break-all:允许再单词内换行
keep-all:只能在半角空格或连字符处换行