Question

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

整个文档在这里：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：

Answer 1

在 top-friend-status-input 类中添加分词：break-word; 所以你的.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;

}

溢出-y不起作用？

1 个答案: