防止内联块换行但允许内容换行答案

【问题标题】：Prevent inline block from wrapping but allow content to wrap防止内联块换行但允许内容换行
【发布时间】：2011-10-28 12:27:36
【问题描述】：

我有这个布局：

<ul style="white-space:nowrap;">
    <li style="width:200px; display:inline-block;"></li>
    <li style="display:inline-block; vertical-align:top; padding-left:10px;"></li>
</ul>

我已经设法阻止 ul 进行包装，这是一个开始。但是，第二个li 中的内容继续离开屏幕。重叠其父元素等。

与第一个 li 不同，我需要第二个 li 来填补空缺并保持动态宽度。我需要将文本包裹在第二个 li 内。

【问题讨论】：

您只需要禁用第一个列表项的换行吗？你可以只为它设置white-space: nowrap;，而不是整个列表容器。
第一个列表项中有图像，第二个列表项中有文本。所以我只关心第二个列表项的包装。

标签： css whitespace

【解决方案1】：

li {display:table;}

是你的朋友。另外，不要忘记删除内联样式！

【讨论】：

您能举个例子吗？

【解决方案2】：

在li 元素上尝试white-space: normal。

white-space 默认继承，所以他们从ul 接收到nowrap。

我开始认为您将 ul 用于布局目的，而 div 可能更适合：

<div class="Item">
 <div class="ImageContainer"><img src="" alt="/></div>
 <div class="TextContainer">Text text text text text</div>
</div>

.Item {
 width: 200px;
 overflow: auto;
}

.ImageContainer {
 float: left;
 width: 40%;
}

.TextContainer {
 float: left;
 width: 60%;
}

【讨论】：

谢谢 - 如果我也添加固定宽度，它似乎只对我有用。我真的不想给第二个 li 添加宽度。
你能具体说明你想要什么吗？因为我开始认为您可能将ul 用于布局目的而不是列出列表。如果是这样，那么也许一些浮动的divs 可能会做得更好。
第一个 li 包含一个图像，第二个 li 应该包含可换行的文本。第二个 li 的大小可以根据屏幕分辨率增大和缩小。
这听起来像一个带有背景图像的 div 和左填充。考虑一下：<div id="x">text text text</div> 和 #x {padding-left: 200px; background-image: url(myimage.jpg);}
@Bazzz 不，这不是背景图片。这是一个前景图像。将其设置为背景图像可能看起来是正确的，但这是一种 hack 并且在语义上是不正确的。

【解决方案3】：

听起来您可能真的想使用表格。

否则，如果您知道图像的宽度，则将其向左浮动并给下一个元素一个大于或等于图像宽度的左边距。

例如：

article > img {
  float: left;
  height: 80px;
  width: 80px;
}
article > div {
  margin-left: 90px;
}

<article>
  <img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b">
  <div>
    <h4>Matt Di Pasquale</h3>
    <p>I know the width of the image is 80px, so I floated it left and gave the <code>div</code> a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.</p>
  </div>
</article>

【讨论】：

【解决方案4】：

这是CSS Grid Layout的一个实际用例：

ul {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 10px;
}
li {
  display: unset; /* reset user agent list-style */
}
img {
  background: #00bcd4; /* style image background */
}

<ul>
<li><img width="200" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20/%3E%0A">
<li>long text content next to the image long text content next to the image long text content next to the image long text content next to the image
</ul>

创建具有10px 列间距的两列网格。第一个网格项具有200px 宽度以匹配您的图像和第二个环绕文本。

如果您尝试包装的内容可能包含长字符串，例如绝对 URL 或科学/医学术语（例如 pneumonoultramicroscopicsilicovolcanoconiosis），请使用 :last-of-type 伪类将 overflow-wrap 添加到第二个 li。

【讨论】：