是否可以在图像周围包裹文本，如下所示

Question

我需要像这样的

周围的文字换行

我使用了以下CSS技巧

img {
    float: left;
    margin: 0 20px 20px 0;
}

p {
    text-align: justify;
    text-indent: 2em;
}

但是我很喜欢这个

Answer 1

您可以使用shape-outside属性。但是，恐怕并非所有浏览器都支持它。

请参阅参考资料：https://css-tricks.com/almanac/properties/s/shape-outside/

浏览器支持：https://caniuse.com/#search=shape-outside

.element{
  shape-outside: url(https://png.icons8.com/metro/300/right-footprint.png);
  shape-image-threshold: 0.5;
  float: left;
}

<img class="element" src="https://png.icons8.com/metro/300/right-footprint.png" />
<p>Lorem ipsum dolor sit amet, ut possit iudicabit usu, ea est detracto intellegat, minim splendide pertinacia te nec. Eu eos elit eripuit bonorum. Eu qui decore indoctum, qui elitr propriae intellegat id. Mei fabulas oporteat postulant eu. Eam at denique vituperata, eu quo ullum oblique, ne prompta iudicabit ius.

Te paulo audire adipisci eum. Has unum errem blandit in, integre dolorem graecis cum ex. Cum at doctus voluptaria voluptatibus. Cibo facilisi abhorreant cu cum. Mei ex zril lucilius. Vix scripserit persequeris ne, cu etiam disputando mea.

Sed ei tollit commune consequat, te alii cibo eleifend mel. Meis bonorum usu eu. Ea graecis necessitatibus ius. Semper utamur usu eu, utinam consectetuer his ei, id decore perpetua per.

Est ea modo dico tota, habeo lobortis suscipiantur te vix, viris altera principes ea eos. Wisi verear ei duo, magna partem vulputate ei mei. Cum ad purto prima legere, erant audire qui at. Nominati constituto repudiandae ut sed, mei cu porro error pericula, ad mollis pertinax principes est. Sed evertitur temporibus philosophia ne, ne zril integre temporibus qui, his option postulant assentior ne. Id mea labore appellantur, has hinc populo cu, at vis elitr everti torquatos.

Hinc purto illum an vis, nam tation sensibus at, reque munere complectitur id sed. Vel everti assentior conceptam te. Vel ut reque dolorum assentior, apeirian liberavisse at nam, vix at regione evertitur temporibus. Blandit persecuti sadipscing no mei.</p>