html - 如何让自动换行以更小的宽度换行

Question

我试图让一行文本在图像旁边显示时自动换行。当文本太长时，它会将文本放在图像下方，然后自动换行。我怎样才能让文本换行，使其适合所有宽度的图像？

在我的示例中，我包括了我所说的图像旁边的意思，以及我所说的直到图像下方才换行的意思。我想出的所有尝试都是更改 #ItemText 的宽度，但这并没有产生预期的结果。

#Items{
    text-align:left;
    display:block;
    vertical-align: top;
    max-width:300px;
    background-color:gray;
}
#imgItem{
    display:inline-block;
}
#ItemText{
    display:inline-block;
    vertical-align: top;
}
.ItemName{
    display:block;
    vertical-align: top;
    font-weight: bold;
}
.ItemNum{
    display:inline-block;
}

<div id="Items">
    <img id='imgItem' height="100" width="50" src='s.jpg' />
    <div id="ItemText">
        <div class="ItemName">
            This text is short enough
        </div>
        <div class="ItemNum">
            AB503
        </div>
    </div>
</div>
<br/>
<div id="Items">
    <img id='imgItem' height="100" width="50" src='s.jpg' />
    <div id="ItemText">
        <div class="ItemName">
            This text doesn't wrap until it goes under the image
        </div>
        <div class="ItemNum">
            AB503
        </div>
    </div>
</div>

Answer 1

不向 <p> 添加任何 css , 它默认环绕 float元素。我们可以通过删除大部分 css 和简单的 float 来实现您想要的。将图像移到左侧并更改您的 <div> s 至 <p>

HTML

<div id="items">
    <div class="item">
        <img class="item-image" height="100" width="50" src='s.jpg' />
        <p class="item-name">This text doesn't wrap until it goes under the image</p>
        <p class="item-num">AB503</p>
    </div>
</div>

#items{
  max-width: 300px;
  text-align: left;
  background-color: gray;
}

CSS

.item {
  min-height: 100px;
  padding: 10px;
}

.item-image {
  float: left;
  padding-right: 10px
}

.item-name {
  font-weight: bold;
}

.item-num {

}

这会将文本很好地包裹在 .item 中分区请注意，因为图像是 float ing，你需要设置一个min-height在 .item 上div 以防止您的图像超出 .item 的边界分区我还添加了一些填充以使内容远离边缘。