<p> テキストを div の外側ではなく下に移動させる方法

Question

こんにちは、カード スライダーに問題があります。

タグが範囲外になり続けますが、長い説明に合わせて下にスライドさせたいのです。全文、 それ、どうやったら出来るの？

長いテキストを使用すると、テキストが区切り文字の外側に出てしまいますが、区切り文字の内側に留まりたいのです

word-wrap:break-word; を使用してみましたが、うまくいきませんでした

div.scroll-container {
  背景色: #7289da;
  ホワイトスペース: ナラップ;
  パディング: 10px;
  オーバーフロー-x: スクロール;
    オーバーフロー-y: 非表示;
    -webkit-overflow-scrolling:タッチ;
}

  .card {
    フロート: なし。
    表示: インラインブロック;
    ズーム: 1;
  パディング: 10px;
  幅: 375ピクセル;
  高さ: 525ピクセル;
}

。容器 {
  パディング: 2px 16px;
    背景色: #fff;
  色: #000;
高さ: 200ピクセル;
}

  .container p {
    色: #000;
    フォントサイズ: 20px;
  }

<div class="scroll-container" id="cardslist">
    <div class="カード">
  <img src="icon.png" alt="アバター" style="width:100%">
  <div class="コンテナ">
    <h4><b>ジョン・ドゥ</b></h4>
    <p>建築家兼エンジニアjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p>
  </div>
</div>

    <div class="カード">
  <img src="icon.png" alt="アバター" style="width:100%">
  <div class="コンテナ">
    <h4><b>ジョン・ドゥ</b></h4>
    <p>アーキテクト兼エンジニア</p>
  </div>
</div>

    <div class="カード">
  <img src="icon.png" alt="アバター" style="width:100%">
  <div class="コンテナ">
    <h4><b>ジョン・ドゥ</b></h4>
    <p>アーキテクト兼エンジニア</p>
  </div>
</div>
    <div class="カード">
  <img src="icon.png" alt="アバター" style="width:100%">
  <div class="コンテナ">
    <h4><b>ジョン・ドゥ</b></h4>
    <p>アーキテクト兼エンジニア</p>
  </div>
</div>
</div>

Answer 1

これは、.scrollable 親要素で white-space: nowrap; を使用したためです。この設定を削除し、.card で word-break:break-word; を設定すると、テキストは正しく折り返されます。

ただし、複数の要素を同じ行に収めるために nowrap に明らかに依存しているため、これではレイアウトが壊れます。

フレックスボックスレイアウトを使用してみてください。よりシンプルで、必要なコードも少なくなります。

リーリー リーリー

Answer 2

CSS プロパティwhite-space: nowrapdiv.scroll-container でスペースが折り返されないようにします。 Mozilla には、この CSS プロパティに関するデモ demo があります。

考えられる修正は、container クラスの値を明示的に normal に戻すことです。

ダミー コンテンツにはかなり長い単語が含まれているため、それでもオーバーフローします。 container クラスで word-wrap:break-word; を使用すると、この問題を解決することもできます。

編集: コメントで @j08691 によって指摘されたとおり:

これはコードの更新された部分です:

リーリー リーリー