使浮动在右边的图像周围的文本对齐

Question

我试图使图像显示在div的右上角，文本首先在图像的左侧，然后在图像结束时，文本应占据div的整个宽度。

这是当前输出：

这是html：

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

这是CSS：

.description {
    padding: 0% 2% 1% 2%;
}

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

.pic2 {
    float: right;
}

我尝试了解决方法here，但是它们对我没有用，并提供与所示图像相同的输出

感谢您的帮助

Answer 1

要使这些单词到处都是易碎的，您需要具备什么条件。因此，word-break: break-all;

.description {
  padding: 0% 2% 1% 2%;
}

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

.pic2 {
  float: right;
}

div {  /* new */
  word-break: break-all;
}

<div>
  <img src="https://placehold.it/400x150" class="pic2" />  slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
</div>