テキストを囲うdiv枠を、文字の長さに応じて常にcssで正円に表示したい

[code]

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

[code]

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




`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]




`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]

