<p> 텍스트를 div 너머가 아닌 아래로 이동시키는 방법

Question

안녕하세요, 카드 슬라이더에 문제가 있습니다.

태그가 계속 범위를 벗어나는데 긴 설명에 맞게 아래로 슬라이드하고 싶습니다. , 어떻게 해야 하나요?

긴 텍스트를 사용할 때 텍스트가 구분 기호 외부에 있지만 내부에 머물기를 원합니다

word-wrap: break-word;를 사용해 보았지만 작동하지 않았습니다

div.scroll-container {
  배경색: #7289da;
  공백: nowrap;
  패딩: 10px;
  오버플로-x: 스크롤;
    오버플로-y: 숨김;
    -webkit-overflow-scrolling: 터치;
}

  .카드 {
    플로트: 없음;
    디스플레이: 인라인 블록;
    줌: 1;
  패딩: 10px;
  너비: 375px;
  높이: 525px;
}

.컨테이너 {
  패딩: 2px 16px;
    배경색: #fff;
  색상: #000;
높이: 200px;
}

  .컨테이너 피 {
    색상: #000;
    글꼴 크기: 20px;
  }

<div class="scroll-container" id="cardslist">
    <div class="카드">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="컨테이너">
    <h4><b>John Doe</b></h4>
    <p>건축가 및 엔지니어njifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p>
  </div>
</div>

    <div class="카드">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="컨테이너">
    <h4><b>John Doe</b></h4>
    <p>건축가 및 엔지니어</p>
  </div>
</div>

    <div class="카드">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="컨테이너">
    <h4><b>John Doe</b></h4>
    <p>건축가 및 엔지니어</p>
  </div>
</div>
    <div class="카드">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="컨테이너">
    <h4><b>John Doe</b></h4>
    <p>건축가 및 엔지니어</p>
  </div>
</div>
</div>

Answer 1

이것은 귀하가 .scrollable 父元素上使用了 white-space: nowrap;。如果您去掉这个设置，并在 .card 上设置 word-break: break-word;에 있고 텍스트가 올바르게 줄 바꿈되기 때문입니다.

그러나 이는 여러 요소를 동일한 행에 맞추기 위해 nowrap에 분명히 의존하고 있기 때문에 레이아웃이 손상됩니다.

Flexbox 레이아웃을 사용해 보세요. 더 간단하고 코드가 덜 필요합니다.

으아악 으아악

Answer 2

CSS 속성white-space: nowrap在div.scroll-container 공백이 줄바꿈되는 것을 방지하세요. Mozilla에는 이 CSS 속성에 대한 데모 demo가 있습니다.

가능한 해결책은 당신을 위한 것입니다 container类明确地将其设置回normal.

더미 콘텐츠의 단어가 다소 길기 때문에 여전히 오버플로됩니다. 이 문제는 container类上使用word-wrap: break-word;에서도 해결될 수 있습니다.

편집: 댓글에서 @j08691이 지적한 대로:

업데이트된 코드 부분은 다음과 같습니다.

으아악 으아악