[엘리멘터 편집] 텍스트문장을 모바일에서 단어 단위로 줄바꿈 하는 방법

PC에서의 문장은 제대로 보이는데 모바일에서 볼때 기기에 따라 자동 줄바꿈이 일어납니다.

이때 단어단위로 줄바꿈이 일어나지 않고 아무렇게나 줄바꿈이 발생되어지게 됩니다.

이럴때 해결하는 방법입니다.

기본적으로는 섹션을 복제하여 PC용/모바일용을 별도로 만들어 운영하시는것도 방법이지만 아래처럼 진행하시면 더 간단하게 해결이 가능합니다.

단어단위의 줄바꿈이 필요한 위젯을 선택하신 후 [고급] > [Custom CSS] 를 선택하신 후 아래의 내용을 css영역에 넣으시고 저장하시면 됩니다.

---------------------------------------

/* 선택한 위젯의 텍스트가 단어 단위로 줄바꿈되도록 설정 */
selector {
    word-break: keep-all;
}

-----------------------------------------

추가로 특수기호(괄호 등)가 들어간 문자열의 경우엔 인식이 안될 수 있습니다.

가령 '(주)회사명' 일경우 (주)와 회사명이 분리되어 나올 수 있습니다. 이럴땐 해당 텍스트 위젯의 [코드]로 진입하신 후

<span style="display: inline-block;">(주)회사명</span>

으로 변경하여주시면 되십니다.

감사합니다~