在DIV中没有自动换行

Question

我试图将我的＆＃34; TEST＆＃34; -text写入我名为DIV的{​​{1}}，但它无法正常工作。

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

＆＃13;

＆＃13;

class="button1"

＆＃13;

#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);
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用word-wrap: break-word，请参阅小提琴

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

http://jsfiddle.net/Lh5nem6n/

Answer 2

您需要做的就是为您的div添加word-wrap: break-word样式：

#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;
  word-wrap: break-word; /* This is the key */
}
.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>

您还可以通过添加overflow: hidden;来使溢出文本消失。

Answer 3

错误出现在您撰写的文本中。您的文字包含空格。更改文本或在类“botton1”中添加“word -wrap：break -word;”。

HTML-CODE

  <div id="main-tabs">
  <div id="tabs">
    <div class="button2"></div>
    <div class="button1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi error consequatur harum nulla doloribus fugit, consectetur odio a at vero, doloremque, eius amet autem tempora vel laborum. In, tempora, aperiam?</div>
  </div>
</div>

CSS-CODE

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

/*#################################*/
.button1{
  margin: 20px;
  float: left;
  width: 150px;
  height: auto;
  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);
}