#TIL #css pre 태그에 자동 줄바꿈을 제거하고 x축 스크롤 바 추가
2017-07-12
pre {
+ white-space: pre;
- white-space: pre-wrap;
- word-wrap: break-word;
+ word-wrap: normal;
+ overflow-x: auto;
}
모바일에서 소스 코드 보기가 힘들다. 더 편하게 읽으라고 줄 바꿈을 자동으로 해주는데, 오히려 읽기가 더 힘들다. 자동 줄 바꿈을 없애고 x축 스크롤 바를 추가했다.
word-warp 프로퍼티 수정을 안 했었다. 사파리로 열어보기 전까지는. normal 값으로 바꾸니 사파리에서도 잘 보인다. 파이어폭스도 알아서 잘 보여주겠지. 크롬과 사파리만 테스트했다. 브라우저마다 다르게 보이면 어떤 짜증이 나는지 짧게나마 체험했다.
참고
- Prevent line-wraps of code blocks using jekyll, kramdown, and rouge - stackoveflow
- white-space - MDN
- CSS3 word-wrap Property - w3schools.com
- overflow-x - MDN
- category:
- til 176
- tags:
- blogging 1
- css 3
@ohyecloudy, ohyecloudy@gmail.com