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

Я могу превратить div в круг следующим образом:

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

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

Но я должен указать ширину width:

Я хочу отобразить три строки текста в DIV с "no-wrap", чтобы каждый из трех сегментов текста имел собственную строку и не был обернут.

Я хочу отобразить их в центре круга и расширить круг, чтобы они соответствовали строкам текста.

Текстовые строки будут вытаскиваться из базы данных через PHP и будут различаться по длине символов.

Проблема заключается в том, что метод, показанный выше, работает только в том случае, если указана ширина/высота.

Это возможно с использованием CSS только с использованием процентов или мне нужна работа JS.

заблаговременно.

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

Все, что вам нужно сделать, это заменить высоту и ширину прописью и отображать встроенный блок. Ссылка: 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 может оставаться неизменным.

Ответ 3

Я не верю, что вы можете добиться того, чего хотите просто с помощью 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>

script:

$(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/

Ответ 4

EDIT: Я принял ваш вопрос. Вам потребуется 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);
});​