当存在多余文本时，Div下降到下一行

Question

每当.story类中有多余文本时，<div>就会下降到下一行。设置固定宽度是不可能的，因为它需要响应，并且文本不会绕过<div>。

隐藏溢出只会隐藏<div>，而white-space: nowrap无效。我错过了一些简单的东西吗？非常感谢！

＆＃13;

＆＃13;

.break{
    margin-top: 40px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
      background: #fff;
}
.breakBox{
    width: 100%;
    font-size: 12px;
    background: #000000;
    color: #000000;
    display: block;
    font-size: 20px;
    height: 40px;
    position: relative;
    width: 1088px;
    margin: 0 auto;
    text-transform: uppercase;
    top: 10px;
    margin-bottom: 10px;
}
.breakBox>div.title {
    font-weight: bold;
    width: 160px;
    float: left;
    width: auto;
    background: #FFEF00;
    color: #000000;
}
.breakBox>div {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    text-align: left;
    vertical-align: middle;
}
.breakBox>div.story {
    left: 160px;
    overflow: hidden;
    top: 0;
    display: block;
    float: left;
    width: auto;
    background: #000;
    color: #fff;
    font-weight: bold;
}

＆＃13;

<div class="break">
			    
    <div class="breakBox">
        <div class="title">some text here</div>
	    <div class="story">
            
            More text goes here... More text goes here... More text goes here... More text
            
        </div>
    </div>

		    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需缩小.story div的字体大小。 如果您向.story添加更多内容，则需要再次相应地减少font-size。

.break{
    margin-top: 40px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
      background: #fff;
}
.breakBox{
    width: 100%;
    font-size: 12px;
    background: #000000;
    color: #000000;
    display: block;
    font-size: 20px;
    height: 40px;
    position: relative;
    width: 1088px;
    margin: 0 auto;
    text-transform: uppercase;
    top: 10px;
    margin-bottom: 10px;
}
.breakBox>div.title {
    font-weight: bold;
    width: 160px;
    float: left;
    width: auto;
    background: #FFEF00;
    color: #000000;
}
.breakBox>div {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    text-align: left;
    vertical-align: middle;
}
.breakBox>div.story {
    left: 160px;
    overflow: hidden;
    top: 0;
    display: block;
    float: left;
    width: auto;
    background: #000;
    color: #fff;
    font-weight: bold;
    font-size:18px;
}

<div class="break">
			    
    <div class="breakBox">
        <div class="title">some text here</div>
	    <div class="story">
            
            More text goes here... More text goes here... More text goes here... More text
            
        </div>
    </div>

		    </div>

Answer 2

您好请使用height:auto中的.breakBox>div。您使用height:40px，这就是问题所在。感谢

Answer 3

如何删除display: block;和float: left; 来自.breakBox>div.story？