如何用尽可能小的圆形区域围绕文字制作圆圈？

Question

我想围绕一个文字有一个圆圈，这样文字占据了的大部分区域的圆圈，都是垂直和水平的，但它应该是一个圆圈，而不是一个椭圆。

这也意味着如果我有一条长线，它会包裹在圆内。

文字长度在高级中是未知的，如果它超出了圆的可能大小，圆应该相应地增长。

这样的事情，但没有SVG：

只使用CSS和HTML是否有可能？

Answer 1

像@Andy福尔摩斯媒体链接说，是IST更多钞票这里的一些例子：

.test { 
 
border-radius: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    } 
 

 
p { 
 
    margin-top: 85px; 
 
    }

<div class="test"> 
 
\t <p>Your text</p> 
 
</div>

Answer 2

根据你的要求，你可以做这样的事情。请注意，您需要设置宽度和高度。我想不出有一种方法来处理那些没有固定高度或宽度的内容，因为它需要这些值来计算半径。

.circle { 
 
    height: 300px; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    border-radius: 50%; 
 
    background: rebeccapurple; 
 
} 
 
.circle p { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    color: white; 
 
}

<div class="circle"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit assumenda sapiente, sunt eveniet quibusdam quas numquam ea libero molestiae nesciunt! Molestias, illum, excepturi. Totam, aliquam. Natus ipsum, earum vero minima!</p> 
 
</div>

Answer 3

有没有这样的CSS/HTML唯一的解决方案可利用的今天，在那里一看就知道一个元素都有其含量成长向侧和向下同样，所以对于工作，你需要一个脚本。

一种可能的解决方法可能是这样的，其中设置了宽度并且使用伪元素创建了实际的圆。有了这个，你只需要调整宽度和文本长度，其余的是自动的。

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 100px; 
 
    padding: 30px; 
 
} 
 
div + div { 
 
    width: 140px; 
 
} 
 

 
div::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    border-radius: 50%; 
 
    border: 1px solid gray; 
 
    padding-bottom: 100%; 
 
}

<div>Hi there, this might be an option for you to use, where the text is a sample</div> 
 

 
<div>Hi there, this might be an option for you to use, where the text is a sample. Hi there, this might be an option for you to use, where the text is a sample</div>