94941

[code]

    div{
      display:inline-block;
      border-radius:50%;
      background-color:yellow;
    }
[/code]

[code]

    <div>文字数可変のテキスト</div>
[/code]


CC BY-SA 4.0
2023-05-22T08:58:20.367
94937
2023-05-22T20:36:30.097
2023-05-22T20:29:59.210
3475
7886
question
css
テキストを囲うdiv枠を、文字の長さに応じて常にcssで正円に表示したい


`border-radius` で円を作るなら、`aspect-ratio` でボックスが正方形になることを保証して、flexible box
でセンタリングするのはいかがでしょうか。

[code]

    div{
      display: inline-flex;  /* センタリングのため変更 */
      border-radius: 50%;
      background-color: yellow;
      aspect-ratio: 1;  /* 正円のため追加 */
      align-items: center;  /* センタリングのため追加 */
    }
[/code]

[code]

    <div>文字数可変のテキスト</div>
    <div>文字数可変</div>
[/code]


CC BY-SA 4.0
2023-05-22T20:36:30.097
94941
2023-05-22T20:36:30.097
3475
94937
answer