包含椭圆形区域的文本

Question

我有一个html页面，如下所示：

我想在左侧窗格中显示一些文字，但问题是文本应该只在椭圆形区域内。我该如何实现这一目标？请注意，椭圆形图像是背景图像，但是如果需要，我也可以使用<img>标记，如果有帮助的话。一种蹩脚的方法是使用带有填充的<p>标签，但这不是一种有效的方法，所以请提出一些好的方法。

编辑： HTML:

<div id="leftStage" class="rounded-corners">
  <div id="questionDisp" align="center">

  </div>
</div>

CSS:

#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}

JS:（当调用适当的函数时：）

$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1);  //data read from xml

编辑：我需要的是一个div或椭圆形背景之上的东西，＆amp;文本应该适合它。我从xml文件中获取文本，因此我不是要显示固定的文本大小

Answer 1

csstextwrap实际上有一个pure CSS/XHTML code generator可以完全满足您的需求。

编辑：

这里的概念是在文本的任一侧浮动<div>，以便您的内容被迫在它们之间“流动”。通过设置浮动<div>的宽度，您可以创建各种级联“模板”。

请参阅此处所示的概念：fiddle

Answer 2

如果是背景图像，则使用具有适当边距（顶部和左侧）的位置：绝对，并将宽度设置为小于椭圆形背景图像的宽度。然后显示属性'block'。

Answer 3

也许你可以试试jQuery插件Text Fill

另见：https://stackoverflow.com/a/688362/753676

Answer 4

我删除了我的答案，因为只有左浮动才有效。

如果您粘贴此代码：它会向您显示其确切的工作方式。我做了一个border-radius而不是创建一个圆圈png。

<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>

Answer 5

您尚未共享任何HTML，工作代码有一些假设

HTML是，

<div id="main">
<div class="text">This is text</div>
</div>​

其中带有text类的div是文本容器。

同样的CSS将是，

#main{
    background-image:url('http://i.stack.imgur.com/bw2HK.png');
    height:563px;
    width:691px;
}
#main .text{
    color:#FF0000;
    width:240px;
    text-align:center;
    top:100px;
    border:1px solid;
    float:left;
    position:absolute;
}

此处.text是表示文本样式的类。主要部分是position:absolute;。这会将文本div位置设置为绝对值。现在，您可以使用顶部和左侧样式移动div上方的div。

请查看工作示例here

P.S。可根据需要更改边框，颜色和其他样式。