当出现多余文本时，Div将移至下一行
当出现多余文本时，Div将移至下一行
提问于 2018-02-21 17:22:53
只要.story类中有多余的文本，<div>就会移到下一行。设置固定宽度是不可能的，因为它需要响应，而且文本无论如何都不会在<div>周围换行。
隐藏溢出只会隐藏<div>，而white-space: nowrap没有任何效果。我是不是漏掉了什么简单的东西？非常感谢!
.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;
}<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>
回答 3
Stack Overflow用户
发布于 2018-02-21 17:35:03
你只需要减小.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>
Stack Overflow用户
发布于 2018-02-21 17:43:51
您好，请在.breakBox>div中使用height:auto。你使用了height:40px，这就是问题所在。谢谢
Stack Overflow用户
发布于 2018-02-21 18:12:01
从.breakBox>div.story中删除display: block;和float: left;怎么样？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48902170
复制相关文章
相似问题
腾讯云开发者
