防止内联块换行，但允许内容换行

Question

我有这样的布局：

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

Answer 1

li {display:table;}

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

Answer 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%;
}

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

Answer 4

这是 CSS 网格布局 的实际用例：

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 或科学/医学术语，例如 pneumonoultramicroscopesilicovolcanoconiosis，则添加 overflow-wrap 使用 到第二个 li href="https://devdocs.io/css/:last-of-type" rel="nofollow noreferrer">:last-of-type 伪类。