如何让环绕图片的文字支持英文断行？

如何让环绕图片的文字支持英文

问题：

使用现有的方法可以实现文字环绕图片的效果，但仅限于中文。如何使该效果也支持英文？

解决方案：

在 CSS 中添加以下规则即可强制英文单词断行：

style="word-break:break-all;"

登录后复制

文档参考：

• [word-break CSS 属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break)

通过添加此规则，英文单词将在遇到图片时自动断行，从而实现环绕效果。

效果展示：

以下是应用 word-break 规则后实现的效果：

p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

img {
  width: 200px;
  height: 200px;
  margin: 10px;
}

p > span {
  margin-right: 10px;
  word-break: break-all;
}

登录后复制

<p>
  @@##@@
  <span>这段文字可以环绕图片显示，包括英文单词。</span>
</p>

登录后复制

以上就是如何让环绕图片的文字支持英文断行？的详细内容，更多请关注GTHOST其它相关文章！