如何使用语义和干净的 HTML、CSS 来制作不均匀的文本换行（不是方形或圆形）？

如何使用语义和干净的 HTML、CSS 进行这样的文本换行？与所有浏览器兼容。

添加不同的类<p>如果没有其他解决方案，这是我想到的唯一解决方案。

但这样每次客户都无法更改类，这是缺点。

您可以将图像设置为背景<p>然后将透明容器以您不希望文本重叠的形状漂浮在背景图像上方。

<p>
    <span id="block1"></span>  
    <span id="block2"></span>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</p>

使用以下 CSS：

p {
   background: url(your-image.png) no-repeat 100% 0;
}

#block1 {
   float: right;
   width: 100px;
   height: 100px;
}

#block2 {
   clear: both;
   float: right;
   width: 200px;
   height: 50px;
}

但缺点是，与段落类解决方案一样，这是一个非常手动的修复。你可以看到在这里行动 http://jsfiddle.net/mjMBz/1/.