화면 너비가 충분하면 오른쪽 플로팅 이미지 주위에 텍스트가 멋지게 표시됩니다 (아래 첫 번째 예 참조). 그러나 뷰포트가 좁아지면 이미지의 왼쪽에 하나의 단어가 표시되고 그 아래에는 나머지 텍스트가 표시됩니다. 특히 처음 몇 단어 중 하나가 길면 길지 않습니다 (아래의 두 번째 예 참조).HTML/CSS : 플로트 요소 근처에서 단일 단어 고아를 방지하는 방법?
이미지에 여분의 왼쪽 여백을 추가하지 않으면 (공간이 충분하지 않을 때 이상하게 보일 것입니다.),이를 방지하기 위해 할 수있는 일이 있습니까?
나는 실제 텍스트 내용이나 뷰포트 너비를 미리 알 수 없습니다.
약간 해키하지만 단어의 전체 세트가 하나의 "실체"로 이동하는 것을<span>
display:inline-block와 힘과 같은 요소의 처음 몇 단어를 포장
말하자면. 문제가 여기에 표시 해결하기 위해 left 속성 : 제가 제대로 문제를 이해한다면
<span style="display:inline-block">First couple words</span> rest of content....
span {
display: inline-block;
}
img {
float:right;
}<div>
<img src="https://placehold.it/300x300" />
<span>First couple words</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit aliquam mauris, ut tempor elit vehicula ut. Cras quis consequat magna, quis viverra risus. Vestibulum et mattis felis, sed interdum ipsum. Nulla accumsan a turpis vitae scelerisque. Nulla dapibus imperdiet quam a dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed egestas sem nunc, nec semper tortor hendrerit a. Sed non cursus metus. Nunc nisl purus, accumsan sed ligula quis, mollis euismod mi. Vivamus at egestas diam. Morbi sed mi in est eleifend tempus nec non mauris. Etiam at iaculis magna, iaculis interdum lorem. Suspendisse potenti. Phasellus elementum nisi tellus, ut vestibulum massa laoreet fermentum.
</div>, 당신은 명확를 사용할 수 w3School
당신이 남용하지 않으려면 Kevin Pei의 솔루션 에서처럼 DOM을 사용하면 텍스트를 남용 할 수 있습니다. 텍스트 비 분리 공백, 의 첫 번째 공간을 확인하고 브라우저가 줄 바꿈 삽입하지 않습니다
img {
float: right;
}<div>
<img src="https://placehold.it/500x50">
Lorem ipsumdolorsitamet, consectetur adipiscing elit. Curabitur blandit aliquam mauris, ut tempor elit vehicula ut. Cras quis consequat magna, quis viverra risus. Vestibulum et mattis felis, sed interdum ipsum. Nulla accumsan a turpis vitae scelerisque. Nulla dapibus imperdiet quam a dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed egestas sem nunc, nec semper tortor hendrerit a. Sed non cursus metus. Nunc nisl purus, accumsan sed ligula quis, mollis euismod mi. Vivamus at egestas diam. Morbi sed mi in est eleifend tempus nec non mauris. Etiam at iaculis magna, iaculis interdum lorem. Suspendisse potenti. Phasellus elementum nisi tellus, ut vestibulum massa laoreet fermentum.
</div>이 & NBSP를 사용하는 것이 좋은 느낌을; 빈 테이블 셀이 아닌 다른 것을 위해.
좀 더 의미 맞습니다 및 텍스트 자체의 조작을 필요로하지 않는 다른 해결책을 발견 할 수 있습니다...
이후 문제 float 된 이미지가 텍스트를위한 공간을 조금 떠날 때 발생하는 것입니다 , 그러나 그것이 충분히 멋지게 흐를만큼 충분하지는 않습니다. 나는 이미지에 어떤 텍스트도 남기지 않습니다.
저는 미디어 쿼리로 이것을 수행합니다. 제가 작업하고있는 사이트의 경우 @media (최대 너비 : 550px)가 가장 적합한 장소입니다. 이미 이미지에있는 수업에서 "너비 : 99 %"를 추가합니다.
뷰포트가 550px보다 크면 텍스트가 제대로 표시 될 충분한 공간이 있습니다. 어쨌든 공간이별로 없었던 550px 이하에서는 이미지가 거의 전체 폭을 차지하고 그 아래의 텍스트를 푸시합니다.
누구나 이런 식으로 문제를 겪고 있습니까?