Круги CSS без ширины или высоты? : Возможно ли это с помощью чистого CSS или нет?

Решение на чистом CSS с некоторыми оговорками

Эта скрипта демонстрирует решение, использующее только css. Он работает безупречно (я думаю) в современных браузерах (IE9+, который в любом случае нужен для border-radius) с отдельными строками текста. Предостережения:

1. Как видно по розовому «кружку», весь текст должен содержаться в одном элементе (а не в нескольких интервалах, как в розовом). Это не большая проблема.
2. Чтобы получить какой-либо «отступ», нужно поместить прозрачный border в набор span с размером «отступа». Это также обычно не должно быть большой проблемой, поскольку маловероятно, что вам нужны границы внутри круга.
3. Как вы можете видеть по css на голубом круге, если ожидается несколько строк текста (или принудительно в моем случае max-width), тогда css для margin-top и top свойства должны быть установлены в соответствии с количеством строк текста. Это может быть проблемой в зависимости от приложения. В многоуровневой версии IE9 требовалось установить overflow: auto, чтобы получить правильный размер.
4. Как вы можете видеть по красному кругу, если вы сузите область отображения, если white-space: nowrap не установлено, и круг начинает оборачивать свою единственную строку текста, тогда происходит некоторое овулярное искажение круга.

Каждый веб-дизайнер должен был бы определить, можно ли учесть ограничения этого решения или нет. Если нет, то решение javascript, опубликованное здесь rgthree, должно работать хорошо. Но если ожидается только одна строка (или некоторое заданное количество строк, как в моем голубом круге), то это решение css должно работать хорошо.

Все, что вам нужно сделать, это заменить высоту и ширину отступом и отобразить встроенный блок. Ссылка: http://jsfiddle.net/6mzP7/

.circle {
   background-color: rgba(0, 0139, 0139, 0.5);
   padding: 200px;
   display: inline-block;
   -moz-border-radius:50%;
   -webkit-border-radius: 50%;
   border-radius:50%; 
}

​<div class="circle"></div>

HTML может остаться прежним.

Я не верю, что вы можете достичь того, чего хотите, просто с помощью CSS. Я попробовал скриптовое решение проблемы...

CSS:

.circle {
 background-color: rgba(0, 0139, 0139, 0.5);
 -moz-border-radius:50%;
 -webkit-border-radius: 50%;
 border-radius:50%;
 padding:10px;
}
.circle span {
white-space: nowrap;
}
.circle div {
position:relative;
top:0;
left:0;
}

HTML:

<div class="circle">
    <div>
        <span>this is some text</span>
        <span>this is some more text</span>
        <span>this is text</span>
    </div>
</div>

Сценарий:

$(function() {
    var widest = 0;
    $('.circle span').each(function(){
        thisWidth = $(this).innerWidth()
        if (thisWidth > widest) {
            widest = thisWidth;
            };
    });
    $('.circle').css('width',widest).css('height',widest);
    $('.circle div').css('top',(widest - $('.circle div').innerHeight())/2);
});

Изменить: я создал скрипт этого предложения: http://jsfiddle.net/4m2ZZ/

РЕДАКТИРОВАТЬ: я ошибся в вашем вопросе. Вам понадобится Javascript, чтобы присвоить ширину по высоте максимальному значению, а также убедиться, что ваш контент расположен по центру.

Вот как в этом JSFiddle: http://jsfiddle.net/rgthree/K4Kpw/

<div class="circle">
    <div>
        <span>This is a line</span>
        <span>This is yet another line!</span>
        <span>Last Line!</span>
    </div>
</div>​

CSS:

.circle {
    position:relative;
    background-color: rgba(0, 0139, 0139, 0.5);
    padding:10px;
    -moz-border-radius:50%;
    -webkit-border-radius: 50%;
    border-radius:50%;
}
.circle > div{
    position:absolute;
    top:50%;
    left:50%;
}

JQuery:

$('.circle > div').each(function(){
    var h, w, max;
    w = $(this).width();
    h = $(this).height();
    max = w > h ? w : h;
    $(this).css('margin-left', -parseInt(w/2,10));
    $(this).css('margin-top', -parseInt(h/2,10));
    $(this).parent().width(max);
    $(this).parent().height(max);
});​