줄 바꿈 시 사라지는 가로 목록에 대한 반응형 CSS 전용 구분 기호를 만드는 방법은 무엇입니까?

반응형 가로 목록용 CSS 전용 구분 기호

반응형 탐색의 맥락에서 목록 항목 사이의 구분 기호를 다음에서 어떻게 제거할 수 있습니까? 다양한 뷰포트로 인한 줄바꿈 크기?

반응형 구분 기호

다음 시나리오를 고려하세요.

• 와이드 뷰포트:

  -> Item 1 | Item 2 | Item 3 | Item 4 | Item 5 

• 소형 뷰포트:

  -> Item 1 | Item 2 | Item 3  Item 4 | Item 5 

그러나 경우에 따라 다음에서 설명한 것처럼 구분 기호는 줄 바꿈 시에도 지속될 수 있습니다. fiddle.

CSS 전용 솔루션

후행 및 줄 후행 공백의 자동 축소를 활용하여 반응형 구분 기호를 만들 수 있습니다.

b {
    background: red;
    outline: 1px solid blue;
}
div {
    resize: both;
    overflow: hidden;
}

<div>
word<b> </b>.repeat(42)
</div>

위 내용은 줄 바꿈 시 사라지는 가로 목록에 대한 반응형 CSS 전용 구분 기호를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!