CSS만 사용하여 가로 목록에 대한 반응형 목록 구분자를 어떻게 만들 수 있나요?

가로 목록에 대한 반응형 목록 구분 기호 만들기

반응형 웹 디자인의 맥락에서 다양한 뷰포트 크기에 걸쳐 요소의 시각적 일관성을 유지합니다. 어려울 수 있습니다. 일반적인 문제 중 하나는 뷰포트가 좁을 때 목록 항목 사이에 구분 기호가 나타나는 것입니다. 이 문서에서는 이러한 구분 기호를 제거하는 방법을 설명합니다.

문제 이해

요소 목록이 가로로 표시되면 항목 사이에 구분 기호(예: 파이프)가 나타날 수 있습니다. 뷰포트가 좁아지면 이러한 요소가 여러 줄로 분할되어 보기 흉한 구분 기호가 남을 수 있습니다.

CSS 전용 솔루션 만들기

하나의 CSS 전용 솔루션은 후행 및 줄 후행 공백의 축소 동작. 목록 항목 사이에 공백을 전략적으로 배치함으로써 구분 기호를 제거하고 깨끗한 시각적 표시를 유지할 수 있습니다.

예제 코드

다음 코드는 이 기술을 보여줍니다.

document.write(`<div>`
+ `word<b > </b>`.repeat(42)
+ `</div>`);

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

이 예에서는 뒤에 공백이 있는 일련의 단어가