A List Apart 不久前写过一篇关于这个的文章。这并不是完全交钥匙,但它们向您展示了如何在PHP中无需太多麻烦。

如果您必须在浏览器端完成这项工作,并且希望它尽可能接近“像素完美”(在指定图像形状周围的精确边距方面),则可能需要使用 <canvas> HTML5的特性。有了它,你就需要做一些“基本”的图像处理:

此示例用于文本右侧的图像,如您的示例

1. edge-detection 图像上的算法(可能是 Sobel 或者 ,如果您可以保证图像具有坚实的背景,则可以选择根据该背景颜色对图像进行阈值设置,以获得 segmentation
2. line-height
   1. 取这个最大值,然后从图像的总宽度中减去它,得到距离图像右侧的距离。
   2. 将此宽度推到数组上 arr .
3. 在包含文本的DOM节点的开头,添加 arr.length <div>

   style="height: [your text's line-height]; 
          width: [value of arr at current element]; 
          margin-left: [desired margin]; 
          float: right; clear: right"

编辑

我为这项技术编写了一个jQuery插件,你可以在 plugins.jquery.com 或者在它的主页上 http://jwf.us/projects/jQSlickWrap

如果你只想做一个单一的形象,你的选择变得更好,但仍然不漂亮。首先想到的是使用monospace字体,测量每行可以容纳多少个字符,然后在此基础上在适当的字符串位置使用js函数insert break。