11

我可以像这样把一个 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 中显示三行文本，因此 3 段文本中的每一个都有自己的行并且没有被换行。

我想将这些显示在一个圆圈的中心，并让圆圈扩大以适合文本行。

文本行将通过 PHP 从数据库中提取，并且字符长度会有所不同。

问题是上面显示的方法仅在指定宽度/高度时才有效。

这是否可能仅使用 CSS 使用百分比，或者我需要一个 JS 解决方法。

提前致谢。

4

4 回答 4

5

带有一些注意事项的纯 CSS 解决方案

这个小提琴演示了一个仅使用 css 的解决方案。它在带有单行文本的现代浏览器（IE9+，border-radius无论如何都需要）中完美地工作（我认为） 。警告是：

  1. 正如您在粉红色的“圆圈”中看到的那样，文本必须全部包含在单个元素中（而不是粉红色中的多个跨度）。这不是什么大问题。
  2. 要获得任何类型的“填充”，需要在设置上将透明border设置span为“填充”大小。这通常也不应该是一个大问题，因为您不太可能希望在圆圈内设置边框。
  3. 正如您通过青色圆圈上的 css 所看到的，如果需要多行文本（或在我的情况下由 a 强制max-width），则 css formargin-top和top属性必须根据文本行数设置。这可能是一个问题，具体取决于应用程序。在堆叠版本上，IE9 需要overflow: auto设置以使其大小正确。
  4. 从红色圆圈可以看出，如果缩小显示区域，如果white-space: nowrap没有设置，并且一个圆圈开始包裹其单行文本，则圆圈会发生一些卵形扭曲。

每个网页设计师都必须确定是否可以考虑此解决方案的局限性。如果没有，那么 rgthree 在此处发布的 javascript 解决方案应该可以正常工作。但是如果只需要一行（或一些固定数量的行，比如我的青色圆圈），那么这个 css 解决方案应该可以很好地工作。

于 2012-04-02T20:47:06.750 回答
1

您需要做的就是用填充和显示内联块替换您的高度和宽度。参考：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%; 
}

​&lt;div class="circle"></div>

HTML 可以保持不变。

于 2012-04-02T18:42:53.047 回答
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);
});

编辑：我已经创建了这个建议的小提琴：http: //jsfiddle.net/4m2ZZ/

于 2012-04-02T18:43:56.420 回答
0

编辑：我误解了你的问题。您需要 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%;
}

查询：

$('.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);
});​
于 2012-04-02T18:02:34.453 回答