Question

我的圈子中有文字：

.circle {
  width: 30px;
  height: 30px;
  background: #eee;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  display: inline-block;
  margin-right: 10px;
}

<div class="circle">0</div>
<div class="circle">100</div>
<div class="circle">10000</div>

在此示例中，当数字很大时，圆圈没有响应。如何使圈子width: 30px和height: 30px响应？我只需要这些尺寸的圆圈。

Answer 1

使用以下padding-technique进行响应圈子：

.circle {
    position:relative;
    display:inline-block;
    margin-right: 10px;
}
.circle span {
    padding:60% 10%;
    margin-top:-0.6em;
    display:flex;
}
.circle span:after {
    content:'';
    position:absolute;
    top:0; left:0;
    width:120%;
    padding-bottom:120%;
    background-color:#eee;
    border-radius:50%;
    z-index:-1;
 }

<div class="circle"><span>0</span></div>
<div class="circle"><span>100</span></div>
<div class="circle"><span>10000</span></div>
<div class="circle"><span>1000000000000</span></div>

编辑：如果您想使圆圈大小保持不变，但更改字体大小，则可以使用以下多种方法来根据父级宽度来获得自适应字体大小： https://css-tricks.com/fitting-text-to-a-container/

Answer 2

仅当调整页面大小或在其他屏幕尺寸（取决于设备）上查看网页时，布局的响应性才适用。在您的情况下，您可能需要调整圆圈的大小或减小文本的字体大小。在https://www.w3schools.com/html/html_responsive.asp

上了解有关响应式布局的更多信息

.circle {
  width: 60px;
  height: 60px;
  background: #eee;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  display: inline-block;
  margin-right: 10px;
}

<div class="circle">0</div>
<div class="circle">100</div>
<div class="circle">10000</div>

Answer 3

以下内容将调整圆圈的大小以匹配文本。

.circle {
            text-align: center;
            line-height: 30px;
            display: inline-block;
            margin-right: 10px;
            background: #777777;
            border-radius: 50%;
        }

<a class="circle">0</a>
<a class="circle">10</a>
<a class="circle">100</a>
<a class="circle">1000</a>
<a class="circle">10000</a>

<br>

<a class="circle">1000000<br>1000000</a>

或者您可以将overflow: hidden;添加到CSS：

.circle {
            width: 30px;
            height: 30px;
            background: #777777;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            display: inline-block;
            margin-right: 10px;
            overflow: hidden;
        }

<div class="circle">0</div>
<div class="circle">100</div>
<div class="circle">10000</div>

圈子中的文字反应灵敏

3 个答案: