How to get word wrap to wrap at smaller widths - html

Question

I am trying to get a line of text to word wrap while it displays next to the image. When the text is too long it puts the text under the image, and then it will do word wrap. How can I get the text to wrap so it fits next to the image at all widths?
In my example I included what I mean by next to the image, and what I mean by not wrapping until under the image. All I have come up with to try is changing the width of #ItemText and that does not produce the desired results.
#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

Without adding any css to a <p>, it defaults to wrapping around floating elements. We can achieve what you want by removing a majority of your css and simply floating the image to the left and changing your <div>s to <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 {
}
That will wrap the text nicely within the .item div. Note that because the image is floating, you'll need to set a min-height on the .item div to prevent your image from extending past the bounds of the .item div. I also added some padding to to keep the content away from the edges.

Answer 2

You could apply new margins based on the image dimensions like so: 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);