HTML에서 줄바꿈 시 문장이 안 잘리게 하기

HTML에서 줄바꿈 시 문장이 안 잘리게 하기

HTML에 텍스트를 적용시 글자가 잘려서 줄 바꿈이 일어나는 일이 있다.

‘무적 LG 트윈스, 가을 야구를 했으면 좋겠다’ 라는 문장을 입력했을 때 좌우 공간이 부족한 경우가 일어난다면

‘무적 LG 트윈스, 가을 야
구를 했으면 좋겠다’

라는 식으로 보기 영 깔끔하지 않은 모습이 되어버린다.

이러한 문제점을 고쳐주는 jquery 라이브러리가 있다!

word-break-keep-all 이라는 라이브러리로 사용법은 해당 텍스트가 있는 태그에 wordBreakKeepAll() 함수를 적용해주면 된다.

만약 strong tag에 있는 텍스트가 위 현상을 보여준다면

  $('strong').wordBreakKeepAll();

라고 코드를 짜주면

‘무적 LG 트윈스, 가을
야구를 했으면 좋겠다’

와 같이 깔끔하게 표현된다.