在绝对位置容器中将文本包装到最大宽度答案

【问题标题】：Wrap text to max-width in an absolute position container在绝对位置容器中将文本包装到最大宽度
【发布时间】：2016-05-18 04:02:43
【问题描述】：

我正在构建一个包含一些文本的绝对位置容器，最大宽度为 200 像素，因此文本应该换行到 200 像素，但它不起作用。

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

Container 有一个相对位置父级，带有“display: inline;”样式，（这种样式导致了问题）。

如果文本较长，如何使容器填充 200px？

这是小提琴：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;”规则查看预期结果)

【问题讨论】：

是的......你不能用绝对定位的 div 来做到这一点。

标签： html css

【解决方案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/

【讨论】：

我遇到了同样的问题。我希望除了添加 div 之外还有其他解决方案，但感谢您的分享！

【解决方案2】：

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

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

【讨论】：

我需要“display:inline;”样式，因为它旁边还有一些其他容器
“display:inline-block;”怎么样那么呢？
不客气！很高兴我能提供帮助：D 只有原始海报才能将答案标记为解决方案。我的答案应该有一个灰色的复选标记供您选择。

【解决方案3】：

把max-width:200px改为width:200px;

【讨论】：

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