메뉴 건너뛰기

프로그램언어

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

입력폼에 컨텐츠에 해당하는 내용을 적도록 할때 textarea 또는 에디터 툴을 적용하여 장문을 지원하는데, 이때 사용자가 엔터와 같은 개행문자를 입력하지 않고, 연속되게 이어서 입력하게되면 나중에 데이터를 받아와서 parsing시 그냥 한줄로 쭉 들어와서 정상적으로 노출되지 않는 현상이 존재한다.

 

이 때, CSS의 word-wrap옵션을 통해 처리가 가능하다.

 

 

word-wrap

word-wrap:break-word;

 

적용전 문제가 되는 모습

 

개행이 없다보니 그대로 넣게되면 깨지는 현상을 볼 수 있다.

 

 

word-wrap: break-word;적용

.contents p {word-wrap: break-word;}

 

적용 후에는 넓이값에 도달하면 알아서 줄바꿈이 일어난다.

 

 

norma옵션도 존재하는데, 이 경우에는 기존처럼 문자열이 뚫고 나온다.


  1. No Image 27Jan
    by
    2023/01/27 Views 2199 

    HTML 특수문자 / 띄어쓰기,공백, 따옴표

  2. input 속성 readonly, disabled 차이점

  3. No Image 12Jan
    by
    2023/01/12 Views 249 

    Input 태그 한글, 영문모드 전환

  4. No Image 26Mar
    by
    2021/03/26 Views 301 

    MSword : 인쇄 미리보기-한페이지씩 보이기

  5. No Image 26Mar
    by
    2021/03/26 Views 201 

    map태그에서 window.open() 쓰기

  6. No Image 26Mar
    by
    2021/03/26 Views 357 

    input태그 tab 순서 설정 : tabindex

  7. No Image 25Mar
    by
    2021/03/25 Views 130 

    인라인 자동완성 기능 막기

  8. No Image 25Mar
    by
    2021/03/25 Views 166 

    javascript로 alt 또는 title 달때 내용에 포함된 따옴표 치환하기

  9. No Image 09Mar
    by
    2021/03/09 Views 152 

    HTML - Form 태그, Input 태그 자동완성 해제하기

  10. 09Mar
    by 조쉬
    2021/03/09 Views 590 

    CSS - p태그 등 너무 긴 문자열이 존재할 때, 넓이에 따른 자동 줄바꿈

  11. HTML - Table td안에 특수문자(")가 존재할 경우 넓이 초과 현상

  12. HTML, CSS - 헤더컬럼 고정형 table 구성하기

  13. 크롬 알림처럼 띄워보기

  14. No Image 29Apr
    by
    2019/04/29 Views 787 

    네이버 웹마스터도구 메타태그

  15. div iframe 퍼센트 높이조절 문제 해결(div, iframe height 100%)

  16. input 자동완성 끄기 HTML

  17. No Image 16Jan
    by
    2019/01/16 Views 2122 

    테이블 대신 필드셋(fieldset) 이용

  18. No Image 27Oct
    by
    2018/10/27 Views 1166 

    FCKeditor 2.6.x 버전 IE9에서의 Dialog 버그 수정

  19. No Image 24Aug
    by
    2018/08/24 Views 1723 

    form안의 button submit 동작 막기

  20. viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법

Board Pagination Prev 1 2 Next
/ 2

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved