テキストが親からはみ出してしまう。

Question

listに入っているtextをmapで回して表示しています。
textの文字が長いと親のdivタグからテキストがはみ出してしまいます。
試しにbox-sizingを指定しましたが変わりませんでした。はみ出さないで表示するにはどうしたらいいのでしょうか？

const Text = styled.li`
  display: flex;
  justify-content: flex-end;
  padding-bottom: 16px;
  .text{
    margin-right: 8px;
    background: blue;
    font-size: 12px;
    border-radius: 20px 20px 0px 20px;
    white-space: pre;
  }
`;


<div syle={{ overflow: 'auto', padding: '24px'}}>
<ul>
  {textList.map((text) => (
    <Text>
      <div className="flex gridgap-5 align-items-end">
        <div className="text">{text.name}</div>
        <p className="fs-10 color-fourth">{text.body}</p>
      </div>
    </Text>
  ))}
</ul>
</div>;

Comments

[FKM]

はみ出さずにどうしたいのでしょうか。回り込ませたいのでしょうか、それとも縮小表示させたいのでしょうか。それによって対策が異なってきます。

[yyyrrr]

返信ありがとうございます。回り込ませたいです

[yyyrrr]

追記しました

Answer 1

white-space: pre; が設定されているからでは。

white-space - CSS: カスケーディングスタイルシート | MDN

pre
連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 <br> 要素でのみ行います。

はみ出さないようにどうしたいのか不明ですが、
折り返したいのなら、
white-space: pre-wrap;
にすればいいでしょう。

折り返さずスクロールできるようにするなら、

   white-space: pre;
   overflow-x: scroll;

Comments

[yyyrrr]

指定しましたが変わりませんでした。

[yyyrrr]

親タグに指定したらいいのでしょうか？

[yyyrrr]

white-space: pre; を指定している理由は改行なら改行をさせたいのでwhite-space: preを指定しています

[hatena19]

> 親タグに指定したらいいのでしょうか？

現状と同じ位置（.text）です。

[hatena19]

> 改行なら改行をさせたいのでwhite-space: preを指定しています

適切な位置に改行がなければ、はみ出ますよね。
その場合、どのようにしたいのですか。
スクロールではみ出た部分を表示できるようにしたいのか、
はみ出た部分を折り返して表示したいのか。
それをはっきりさせましょう。

[yyyrrr]

はみ出した部分を折り返して表示させたいです

[hatena19]

現状の
white-space: pre;
を
white-space: pre-wrap;
に変更すればいいでしょう。

[yyyrrr]

指定しましたがやはりはみ出してしまいます

[hatena19]

当方の作成したサンプルでは折り返されます。
下記のリンク先でも pre と pre-wrap の違いを確認できます。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space#CSS_Result

現象の再現できる、実際に出力されたHTMLコードとCSSコードを質問に追記してください。

[yyyrrr]

追記しました