html - 避免文本增加元素的大小

Question

我有两个 div - 一个是固定高度，另一个使用弹性框占用其余的水平空间：

#first
{
   width:300px;
    height: 200px;
   background-color:#F5DEB3;

}

#second
{
   width:300px;
   background-color: #9ACD32;
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, */
}

当底部的 div 里面有长文本时，如何防止底部 div 扩展？（虽然仍然只占用剩余的水平空间。）

http://jsfiddle.net/vc1nb6e3/

标签： htmlcss

Answer 1

好吧，你想对不合适的文本做什么？

你可以用overflow.

把它藏起来：

#second
{
   width: 300px;
   background-color: #9ACD32;
   flex: 1;
   overflow: hidden;
}

添加卷轴：

#second
{
   width: 300px;
   background-color: #9ACD32;
   flex: 1;
   overflow: scroll; // overflow: auto;
}