如何动态地将文本包装在自定义表单（即圆圈）中的div内

Question

我正在为一所学校的网站工作，我已将博客文章项目整理出来。我的问题是，因为它们是圆形的，所以有很多空间无法解决这个问题。我想知道是否有办法为每一行设置不同的宽度或激活某种类型的包裹功能来填充曲线。我想要实现的是将p或文本标签舍入以填充帖子中未使用的空间。就像注意一样，博客是圆形的，使用CSS中的边框半径特征。

CSS：

.content {
    width: 730px;
    height: 150px;
    float: left;
}
.body {
    width: 655px;
    background: #06C;
    height: 144px;
    border-top-left-radius: 75px;
    border-bottom-left-radius: 75px;
    border: 3px solid #000;
    border-right: none;
    margin-top: 10px;
}
.image {
    width: 144px;
    height: 144px;
    background: #0C3;
    margin-top: -150px;
    border: 3px solid #000;
    border-radius: 75px;
    float: right;
}
.image img {
    border-radius: 75px;
    width: 144px;
    heiht: 144px;
}
.body p {
    width: 535px;
    margin-left: 40px;
    text-align: justify;
}

HTML：

<div class="content">
    <div class="body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non nisi vehicula, sodales mi vitae, ornare mi. Cras non urna ac lorem luctus consectetur eu et lacus. Nunc eget auctor sem. Donec sit amet libero condimentum mauris sodales eleifend. Fusce vitae eleifend tortor. Nullam dapibus orci non ipsum sodales tristique. Mauris pharetra sem ac velit pellentesque dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tristique dignissim tristique.</p>
    </div>
    <div class="image">
        <img src="images/img.jpg">
    </div>
</div>

Answer 1

使用当前的浏览器支持，这在CSS中是不可能的，所以我们需要在这里使用Javascript（我也使用jQuery来简化）：

for(var x=-4;x<5;x++) {
    $('.body').prepend('<div class="float" style="width:'+(x*x*2.5)+'px"></div>');   
}

这会插入一些浮动div元素，将文字推向半圆形状。与此CSS一起：

.float {
    float:left;
    height: 11%;
    clear:left;
    margin-left: 10px;
}

你得到的内容如下：http://jsfiddle.net/4n5pA/3/