我正在构建一个包含一些文本的绝对位置容器,最大宽度为 200 像素,因此文本应该换行到 200 像素,但它不起作用。
我无法设置固定宽度,因为如果文本较短,宽度应该更小。
容器有一个相对位置父级与“display: inline;”样式,(此样式导致了问题)。
如果文本较长,如何让容器填满 200px?
这是 fiddle :https://jsfiddle.net/m2wr9m06/3/
.showlist {
box-shadow: 5px 5px 20px #191919;
padding: 5px;
max-width: 200px;
position: absolute;
z-index: 1;
left: -5px;
font-family: "Century Gothic", Century, "Arial Black";
font-size: 14px;
}
.flag {
color: #FF9900;
position: relative;
display: inline-block; /* remove this rule to see the expected result */
margin: 5px;
font-size: 16px;
}
<div class="flag">
<div class="showlist" >
<div>asdf 4444 555555 666666 7 8 8888 9999 555 444</div>
<div>4 8 15 16 23 42</div>
<div>asdf foo bar </div>
</div>
</div>
(删除“dispay:inline;”规则以查看预期结果)
最佳答案
我找到了一个解决方案,我希望它能帮助别人,我添加了一个 200px 的额外容器;宽度:
<div class="flag">
<div style='width:200px;'>
<div class="showlist" >
<div>asdf 4444 555555 666666 7 8 8888 9999 555 444</div>
<div>4 8 15 16 23 42</div>
<div>asdf foo bar </div>
</div>
</div>
</div>
fiddle :https://jsfiddle.net/m2wr9m06/8/
关于html - 在绝对位置容器中将文本换行到最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37284479/