코드 스니펫이 줄바꿈되는 문제, CSS 한 줄로 해결한 방법
Preventing line breaks in <code> elements
블로거 alexwlchan이 자신의 웹사이트에서 `<code>` 요소의 어색한 줄바꿈을 방지한 방법을 소개합니다. 기존에는 본문 텍스트에만 non-breaking space를 적용했지만, 코드 스니펫에서는 하이픈이나 공백 때문에 `(?-u:…)`가 `(?-`와 `u:…)`로 나뉘는 문제가 있었습니다. 이를 해결하기 위해 짧은 `<code>` 요소에 `nowrap` 클래스를 자동으로 추가하는 Python 스크립트와 CSS `text-wrap: nowrap` 규칙을 사용했습니다. 이 방법은 코드의 의미를 바꾸지 않으면서 가독성을 높여줍니다.
브라우저는 줄바꿈할 수 있는 문자를 찾는데, 영어에서는 하이픈이 포함됩니다. 하이픈으로 연결된 단어를 여러 줄로 나누는 것은 보통 괜찮지만, 코드에서 그렇게 되면 짜증납니다.