如何让自动换行以较小的宽度换行

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 ing 元素。 我们可以通过删除大部分 css 并简单地将图像float到左侧并将您的 <div> s 更改为 <p> s 来实现您想要的。

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

这将很好地将文本包装在.itemdiv中。 请注意，由于图像float，因此您需要在.itemdiv上设置min-height，以防止图像超出.itemdiv的边界。 我还添加了一些填充，以使内容远离边缘。

Answer 2

您可以

根据图像尺寸应用新的边距，如下所示： https://jsfiddle.net/L6v60u03/

.HTML

<div class="Items">
    <img class='imgItem' height="100" width="50" src='http://theartmad.com/wp-content/uploads/2015/04/Smiley-Face-5.jpg' />
    <div class="ItemText">
        <div class="ItemName">This text is short enough</div>
        <div class="ItemNum">AB503</div>
    </div>
</div>
<br/>
<div class="Items">
    <img class='imgItem' height="100" width="50" src='http://theartmad.com/wp-content/uploads/2015/04/Smiley-Face-5.jpg' />
    <div class="ItemText">
        <div class="ItemName">This text doesn't wrap until it goes under the image</div>
        <div class="ItemNum">AB503</div>
    </div>
</div>

.CSS

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

.JS

var width = $(".imgItem").css("width");
var height = $(".imgItem").css("height");
var trueWidth = parseInt(width) + 10; // Adjust padding by adding more
var trueHeight = parseInt(height) * -1 + 10; // Adjust padding by adding more
$(".ItemText").css("margin-left", trueWidth);
$(".ItemText").css("margin-top", trueHeight);