텍스트필드 데이터 줄이거나 줄바꿈 표현하기

<textarea> 태그와 같이 내용이 긴 텍스트 데이터 입력을 받고 이 데이터를 표출하는 방법 Tip을 소개하고자 합니다.

 

1.  글자수 제한하여 표출하기

전체 데이터 목록을 표출하는 데 있어서 한 페이지에 표출하는 내용을 제한하고자 할 때 글자수를 제한하여 표출할 때 유용한 방법입니다.

전체 글자수 길이를 확인하여 표출하고자 하는 글자수와 비교하여 적으면 전체를 보여주고, 넘어가면 글자 수 만큼 자르고 "..." 줄임말 표시를 붙여 줍니다.

아래의 예시는 200자를 넘어가면 slice 로 200자까지 자르고 "..." 을 붙이고, 아니면 전체 글자수를 표출합니다.

        <p class="card-text">
          <%= (campground.trrsrtIntrcn.length > 200) ?
          campground.trrsrtIntrcn.slice(0,200)+" ..." : campground.trrsrtIntrcn
          %>
        </p>

 

 

2.  줄바꿈 표출하기

textarea 데이터 입력할 때 줄바꿈으로 입력해도 데이터베이스에 저장하고 저장 데이터를 불러와서 표출할 때 줄바꿈이 무시되고 표출됩니다.

이 때 아래와 같이 style을 지정하면 줄바꿈 표출이 정상적으로 보여집니다.

style="white-space: pre-line"

 

        <p class="card-text" style="white-space: pre-line">
          <%= campground.trrsrtIntrcn %>
        </p>

적용전 - 적용후

 

데이터베이스 저장 내용 - \r\n 입력되어 있음