<p> 텍스트를 div 너머가 아닌 아래로 이동시키는 방법
P粉461599845
P粉461599845 2023-08-17 18:58:37
0
2
532
<p>안녕하세요, 카드 슬라이더에 문제가 있습니다. <code><p></code> 태그가 계속 범위를 벗어나는데 긴 설명에 맞게 아래로 슬라이드하고 싶습니다. , 어떻게 해야 하나요? </p> <p>긴 텍스트를 사용할 때 텍스트가 구분 기호 외부에 있지만 내부에 머물기를 원합니다</p> <p><code>word-wrap: break-word;</code>를 사용해 보았지만 작동하지 않았습니다</p> <p><br /></p> <pre class="brush:css;toolbar:false;">div.scroll-container { 배경색: #7289da; 공백: nowrap; 패딩: 10px; 오버플로-x: 스크롤; 오버플로-y: 숨김; -webkit-overflow-scrolling: 터치; } .카드 { 플로트: 없음; 디스플레이: 인라인 블록; 줌: 1; 패딩: 10px; 너비: 375px; 높이: 525px; } .컨테이너 { 패딩: 2px 16px; 배경색: #fff; 색상: #000; 높이: 200px; } .컨테이너 피 { 색상: #000; 글꼴 크기: 20px; }</pre> <pre class="brush:html;toolbar:false;"><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></pre> <p><br /></p>
P粉461599845
P粉461599845

모든 응답(2)
P粉448346289

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

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

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

으아악 으아악
P粉769045426

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

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

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

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

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

으아악 으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿