我有这样的结构:
.out {
display: inline-block;
border: 2px solid green;
}
.in {
display: inline-block;
max-width: 300px;
border: 2px solid red;
}
<div class="out">
<div class="in">
Sample text
</div>
</div>
当 div.in
溢出时(例如,其内容为 SampletextSampletextSampletextSampletextSampletextSampletextSampletext
),它的外观和行为如下:
.out {
display: inline-block;
border: 2px solid green;
}
.in {
display: inline-block;
max-width: 300px;
border: 2px solid red;
overflow: visible;
}
<div class="out">
<div class="in">
SampletextSampletextSampletextSampletextSampletextSampletextSampletext
</div>
</div>
但我希望它看起来像这样:
我该怎么做?
最佳答案
看起来 div.out 正在按预期扩展。但主要问题是 div.in
中的文本溢出。
您可以使用word-wrap:break-word
或overflow
。
下面是一个使用自动换行
的演示
.in {
display: inline-block;
max-width: 300px;
border: 2px solid red;
word-wrap: break-word;
}
关于javascript - 子div溢出时强制父div放大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38891162/