html - DIV 中没有自动换行

Question

我正在尝试将我的“TEST”文本放入名为 class="button1" 的 DIV 中，但它无法正常工作。

http://www.allgameplay.de/images/img-html_text_fail.png

#main-tabs{
  height: 90%;
  width: 100%;
}
#tabs{
  padding: 20px;
  min-height: 100px;
  height: auto;
  width: auto;
}

/*#################################*/
.button1{
  margin: 20px;
  float: left;
  width: 150px;
  height: 150px;
  background-color: #485EDF;
  -webkit-transition: 0.45s ease-in-out;
  -moz-transition: 0.45s ease-in-out;
  -o-transition: 0.45s ease-in-out;
  transition: 0.45s ease-in-out;
  border: 1px #FFFFFF solid;
}
.button1:hover{
  -moz-transform: scale(1.3,1.3);
  -ms-transform: scale(1.3,1.3);
  -o-transform: scale(1.3,1.3);
  -webkit-transform: scale(1.3,1.3);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}

<div id="main-tabs">
  <div id="tabs">
    <div class="button2">
    </div>
    <div class="button1">sadafhgsdfhgadlfk,gvadbkhgbsdakhfgbskjdfhbakjhfgvksjejdfhgvskjdhfvgksjhfgvjk
    </div>
  </div>
</div>

Answer 1

使用word-wrap: break-word，参见fiddle

.button1 {word-wrap: break-word;}

http://jsfiddle.net/Lh5nem6n/