Question

我正在使用一些文本构建一个绝对位置容器，max-width是200px，因此文本应该换行到200px，但它不起作用。

我无法设置固定宽度，因为如果文字较短，则应该更小。

Container的父级相对位置为＆＃34; display：inline;＆＃34;风格，（这种风格导致问题）。

如果文字较长，如何让容器填满200px？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

（删除＆＃34; dispay：inline;＆＃34;规则以查看预期结果）

Answer 1

我找到了一个解决方案，我希望它有所帮助，我添加了一个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>

小提琴：https://jsfiddle.net/m2wr9m06/8/

Answer 2

将display:inline替换为.flag上的display:inline-block。

.flag { color:#FF9900; position:relative; display:inline-block; margin:5px; font-size:16px; }

Answer 3

而不是max-width:200px，将其更改为width:200px;

将文本换行到绝对位置容器中的max-width

3 个答案: