CSS에서 사전 태그를 100% 반응형으로 만드는 방법

몇 가지 CSS 속성을 추가하여 HTML 사전 태그를 100% 반응형으로 빠르게 만드는 방법을 알아보세요.

다른 튜토리얼 웹사이트에서 자주 볼 수 있는 문제는 긴 코드 조각(pre 태그)가 페이지 너비를 넘고 페이지 레이아웃이 깨집니다.

이것은 기본적으로 pre이기 때문에 발생합니다. 태그에는 CSS white-space이 있습니다. 속성이 normal로 설정됨 , 다음과 같이:

pre {
  white-space: normal;
}

문제를 해결하려면 normal을 변경하면 됩니다. pre-wrap :

pre {
  white-space: pre-wrap;
}

이것은 큰 개선이지만 pre-wrap하기 때문에 오버플로 문제를 완전히 해결하지는 못합니다. 코드의 전체 줄만 처리합니다(공백으로 구분된 한 줄의 코드 용어 모음).

코드 라인의 개별 단어가 너무 길어서 페이지 너비를 초과하면 어떻게 됩니까?

pre-wrap하기 때문에 레이아웃이 계속 깨집니다. 개별 단어를 다루지 않습니다.

좋은 예는 길이가 50자를 초과할 수 있는 디렉토리 경로입니다. 이 경로는 특히 모바일에서 많은 레이아웃에 대해 너무 넓습니다. 다음은 제 컴퓨터의 예입니다.

cd /Users/david/Dev/techstacker/content/posts/how-to-make-seo-friendly-urls/how-to-make-seo-friendly-urls.md

위 줄에서 단어 사이에 공백이 없기 때문에 one으로 읽습니다. 브라우저에서 긴 단어. 각 단어 사이에 공백으로 구분된 경우 pre-wrap 때문에 잘 줄 바꿈됩니다. 우리가 방금 논의한 속성. 하지만 하나의 긴 단어로 읽힙니다.

이 문제를 해결하기 위해 사전 태그에 word-break라는 다른 CSS 속성을 추가합니다. , break-all 값을 지정합니다. . 이렇게:

pre {
  white-space: pre-wrap;
  word-break: break-all;
}

이제 사전 태그가 100% 반응합니다.