溢出-y 不工作？

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>

我尝试查找不同的解决方案，但其中 none 与我面临的问题相似。请帮助 D:

Answer 1

添加一个 word-break: break-word; 到你的 top-friend-status-input class 所以你的 .top-friend-status-input class 看起来像这样：

.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 不工作？

Overflow-y not working?

html

css

overflow