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>

но я должен указать высоту ширины:

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

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

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

проблема метода показано выше работает только если задана ширина / высота.

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

спасибо заранее.

10
circle css css-shapes jquery

4 ответов

чистое решение 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 должно работать хорошо.

5

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

1

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

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

1

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);
});​
0