Содержащий текст в области овальной формы

У меня есть html-страница, которая выглядит следующим образом:

Я хочу отобразить текст на левой панели, но проблема в том, что текст должен быть внутри области только овальной формы. Как мне это достичь? Обратите внимание, что изображение в овальной форме является фоновым изображением, однако при необходимости я также могу использовать тег <img>, если это поможет. Один из способов - использовать теги <p> с дополнением, но это не эффективный способ, поэтому любезно предложите несколько хороших методов.

EDIT: 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

EDIT: мне нужен div или что-то выше овального фона, и текст должен поместиться в нем. Я получаю текст из XML файла, поэтому я не имею фиксированного размера текста, который будет отображаться

Ответ 1

На самом деле, чистый генератор кода CSS/XHTML на csstextwrap, который делает именно то, что вы хотите.

EDIT:

Концепция здесь состоит в том, чтобы плавать <div> по обе стороны от вашего текста, чтобы ваш контент был вынужден "течь" между ними. Установив ширину вашего плавающего <div>, вы можете создать множество каскадных "трафаретов".

Смотрите концепцию, показанную здесь: fiddle

Ответ 2

Если это фоновое изображение, используйте положение: абсолютное с соответствующими полями (сверху и слева) и установите ширину меньше, чем овальное фоновое изображение. Затем отобразите свойство "block".

Ответ 3

Возможно, вы можете попробовать плагин jQuery Text Fill

также см.: fooobar.com/questions/22556/...

Ответ 4

Я удалил свой ответ, так как работал только левый поплавок.

Если вы вставляете этот код: он покажет вам, как он работает. Я сделал радиус границы вместо создания круга 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 not automatic, but it<br /> does the job that you need it<br /> to do.
</div>

Ответ 5

Вы не поделились HTML, рабочий код с некоторым допущением

HTML,

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

Где div с классом text является текстовым контейнером.

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, используя верхний и левый стили.

Пожалуйста, просмотрите рабочий пример здесь

P.S. Границы, цвета и другие стили могут быть изменены в соответствии с вашими потребностями.