溢出-不起作用？

debugcn 发表于 Dev

白兔子

我以前从未遇到过这个问题，但是由于某种原因，当我使用溢出时，这里的容器不会自动换行。

整个文档在这里：http : //codepen.io/Peechiee/pen/RNMRLy?editors=110

但是，这只是我要指的部分：

.top-friend-statuses
{
  float:right;
  background-color:#eeeeee;
  width:33%;
  height:auto;
  margin-top:1%;
  padding:1%;


  -webkit-border-radius: 5px;
  border-radius: 5px;
  }


.top-friend-status-image
{
  height:100px;
  width:100px;
  float:left;
  margin-left:2%;
}


.top-friend-status-post
{
  height:110px;
  width:100%;
  background-color:DARKGREY;
  margin-top:1%;
  margin-bottom:1%;
  padding-top:1.6%;
  padding-bottom:1%;
}

.top-friend-status-input
{
  float:left;
  height:100px;
  width:53%;
  overflow-x:hidden;
  overflow-y:auto;
  background-color:LIGHTGREEN;
  font-size:9pt;
}

.top-friend-status-add-message
{

  display:inline-block;
  background-color:RED;
  height:30px;
  width:30px;
  font-size:8pt;
  overflow:hidden;
  margin-top:0%;
  margin-left:3%;
  float:right;
}

.top-friend-status-mood
{
  background-color:VIOLET;
  height:auto ;
  width:30%;
  float:left;
  font-size:9pt;
}

这是HTML

      <div class="top-friend-statuses">



  <div class="top-friend-status-post">



  <img src="http://placehold.it/100x100" class="top-friend-status-image">

  <div class="top-friend-status-input">
  fll;dkgj;lkdgkldhjdgkldlgkdj;gk;djlkgdj;gjldkj;ksd;slgkj;ldkg
  </div>

  <div class="top-friend-status-add-message">
  DERP
  </div>

  </div>



  </div>

我尝试查找不同的解决方案，但没有一个与我所面临的问题相似。请帮助D：

加尔比麦芽酒

添加断字：break-word; 到您的top-friend-status-input类，因此您的.top-friend-status-input类如下所示：

.top-friend-status-input
{

  word-wrap: break-word;

  float:left;
  height:100px;
  width:53%;      
  overflow-x:hidden;
  overflow-y:auto;
  background-color:LIGHTGREEN;
  font-size:9pt;

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。