Html 围绕浮动到右侧的图像对齐文本

我试图让图像出现在div的右上角，文本首先出现在图像的左侧，然后当图像结束时，文本应该占据div的整个宽度

这是当前的输出：

这是html：

<div>
<img src="./images/gym.jpeg" class="pic2"/>
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
</div>

我已经尝试了这些解决方案，但是它们对我不起作用，并且给出了与所示图像相同的输出

---

感谢您的帮助

让这些单词到处都是易碎的。所以，

wordbreak:break all


。说明{
填充：0%2%1%2%；
}
.p.说明{
字体大小：20px；
}
.pic2{
浮动：对；
}
div{/*新*/
单词break：打破一切；
}

SLASDFKASJHDFKJASDHFKJASDHFKJLSHDKL SLASDFKASJHDFKJASDHFKJLSHDKL SLASDFKASJHDFKJASDHFKJASDHFKJLSHDKL SLASDFKASJHDFKJASDHFKJASDHFKJLSHDKL SLASDFKASJHDFKJASDHFKJLSHDKL
SLASDFKASJHFKJASDHFKJLLASDHFKJLLASHDKL SLASDFKASJHFKJASDHFKJLLASHDKL
您的标记按原样工作。你能重现这个问题吗？也许您应该使用Lorem Ipsum文本，而不是长得离谱的非单词进行测试。：）@伊舍伍德：那么你的解决办法是用更短的词？是的，那也行。我认为这些长词的出现是有原因的……如果是这样的话，我会认为问题会提到它。也许不是。有没有办法在不让单词溢出到下一行的情况下执行此操作？将其更改为
wordbreak:break word。Thanks@wtreston哦，但是要小心，
wordbreak:break-word
在所有浏览器中都不起作用。您可以使用
单词break:break all；断字：断字用于回退。
.description {
    padding: 0% 2% 1% 2%;
}

.description p {
    font-size: 20px;
}

.pic2 {
    float: right;
}