[CSS] 줄바꿈 방지하는 코드

 

아래 사진과 같이 해시태그를 구현할때 overflow가 났을때 옆으로 스크롤 할 수 있게끔 구현하였지만, 텍스트가 block을 넘어가버리는 오류가 있었다. 이를 해결하는 방법은 white-space : nowrap; 속성을 주면 된다.

nowrap 속성을 주기 전 원하지 않는 부분에 줄바꿈이 되어있다.

 

className = "test-code" 라고 할때

.test-code{

white-space : nowrap; 

}

라는 속성을 주면 줄바꿈이 더이상 되지 않는다.

nowrap 속성을 준뒤 의도대로 나오는 모습입니다.

이렇게 줄바꿈을 방지할 수 있다.