<p> 텍스트를 div 너머가 아닌 아래로 이동시키는 방법
P粉461599845
2023-08-17 18:58:37
<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>
이것은 귀하가
.scrollable
父元素上使用了white-space: nowrap;
。如果您去掉这个设置,并在.card
上设置word-break: break-word;
에 있고 텍스트가 올바르게 줄 바꿈되기 때문입니다.그러나 이는 여러 요소를 동일한 행에 맞추기 위해
nowrap
에 분명히 의존하고 있기 때문에 레이아웃이 손상됩니다.Flexbox 레이아웃을 사용해 보세요. 더 간단하고 코드가 덜 필요합니다.
CSS 속성
white-space: nowrap
在div.scroll-container
공백이 줄바꿈되는 것을 방지하세요. Mozilla에는 이 CSS 속성에 대한 데모 demo가 있습니다.가능한 해결책은 당신을 위한 것입니다
container
类明确地将其设置回normal
.더미 콘텐츠의 단어가 다소 길기 때문에 여전히 오버플로됩니다. 이 문제는
container
类上使用word-wrap: break-word;
에서도 해결될 수 있습니다.편집: 댓글에서 @j08691이 지적한 대로:
업데이트된 코드 부분은 다음과 같습니다.