我可以像这样将一个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" 使得每个文本段都有自己的一行并且不换行。
我希望将它们显示在一个圆形的中心，并让圆形扩展以适应文本行。
文本行将通过 PHP 从数据库中提取，并且字符长度会有所变化。
问题是上面展示的方法只有在指定宽度/高度时才有效。
是否可以仅使用 CSS，使用百分比实现这一点，还是需要一种 JS 的解决方案。
提前感谢。
这个示例演示了仅使用CSS的解决方案。它在现代浏览器中（IE9+，该版本需要border-radius）适用于单行文本时可以完美地工作（我认为）。注意事项如下：
border。通常这也不会成为问题，因为您不太可能希望将边框放在圆形内部。max-width），则必须根据文本行数设置margin-top和top属性的css，这可能取决于应用程序。在堆叠版本中，IE9需要设置overflow: auto才能正确设置其尺寸。white-space: nowrap并且圆形开始换行其单行文本，则会出现一些椭圆形变形，正如红色圆形的示例所示。每个网页设计师都需要确定此解决方案的限制是否可以解决。如果不能，则rgthree在这里发布的javascript解决方案应该很好用。但是，如果只期望单行（或某个固定数量的行，例如我的青色圆形），则此css解决方案应该很好用。
你只需要用padding和display inline-block替换你的高度和宽度即可。参考：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);
});
编辑：我已经在这个建议上创建了一个 fiddle：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);
});