태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

텍스트 줄바꿈, 글자자르기 CSS

7년 전

white-space
공백  줄바꿈문자  처리방법  (띄어쓰기나  줄바꿈으로  이한  공백부분  등)

white-space:normal;

normal이  기본값,  여러칸의  공백이나  줄바꿈을  공백  1칸으로  인식한다.  지정된  넓이의  끝에서  자동으로줄바꿈한다.

-  코드에서의  원래  텍스트
여수  밤바다  이        조명에  담긴        아름다운        얘기가  있어  네게  들려주고파

white-space:pre;

띄어쓰기는  실제  입력한  칸  수대로,  줄바꿈도  엔터를  친  대로  나온다.  넘어가는  부분에서  강제  줄바꿈은  되지  않는다.

white-space:nowrap;

여러칸의  공백이나  줄바꿈을  공백  1칸으로  인식한다.
넓이를  지정하였어도  자동으로  줄바꿈  되지  않게  강제로  개행을  막아준다.

  word-break
텍스트가  들어가는  블럭요소의  넓이에  맞춰  줄바꿈  하는  CSS  (강제  줄바꿈  방지,  텍스트길이  제한)

word-break:normal;

normal이  기본값,  단어  단위로  끊어서  줄바꿈  한다  .
(단어  단위로  줄바꿈되어  오른쪽  공간이  꽉차지  않고  비어있는  형태다.)

word-break:break-all;

글자  단위로  줄바꿈  한다.  (글자단위로  줄바꿈이  되어  글자가  박스  안에서  가득차는  형태다.)

word-breka:keep-all;
한글일  경우  띄어쓰기  기준으로  줄바꿈  해준다.  (ie계열/아시아  언어만  지원,파폭  3.5이상에서는  지원)

  text-overflow
텍스트가  overflow  되었을때  어떻게  처리할  것인가를  나타내는  CSS  (  overflow  속성이  값을  갖고  있을때  적용가능)

text-overflow:clip;
엘리먼트  테두리에서  글자가  잘리게  된다.

text-overflow:ellipsis;
테두리에  닿을  정도가  되면  자동으로  ....을  넣어준다.

  적용시  참고사항
text-overflow:ellipsis는고정된  width값,  white-space:nowrap;  overflow:hidden  속성이  있어야  적용가능하다.

div{  width:250px;  overflow:hidden;white-space:nowrap;  text-overflow:ellipsis;  padding:10px;  border:1px  solid  #e5e5e5;  background:#f5f5f5;  }

특수문자,  숫자,  영어가  띄어쓰기  없이  나열되었을때,  (한글과  표기되는  형식이  다르다.)

기본값을  그대로  쓴다면  지정된  엘리먼트  밖으로  글자가  뚫고  나온다.

1.  word-break:break-all  을  사용  하여  자동줄바꿈이  되게  해야  한다.
2.  파폭,  오페라는  이  속성이  적용되지  않기  때문에  word-break:break-word  를  사용하여야  한다.
3.  table  안에  td에  적용  할러면  table-layout:fixed;를  사용한다.

추천 목록

번호	제목
425	MySQL 중복된 데이터를 삭제
424	MySQL 중복 데이터 확인
423	아이프레임(iframe) 전체화면 가능하게 하기
422	부트스트랩(bootstrapk)에서 사용하는 class명 정리
421	부트스트랩 CSS
420	크롬에서 마진 조절
419	웹페이지 가로 모드세로 모드 인식하기
418	모바일 웹 화면 강제 회전(가로모드 고정)
417	[CSS] 박스 세로 가운데 중앙 정렬 6가지
416	CSS Layout 수평 & 수직 정렬
415	[JQuery] textbox focus on off일때 숫자 콤마 보여주기
414	[HTML5] <video> - DOM으로 제어하기
413	HTML5 video 태그에서 영상 좌우반전
	텍스트 줄바꿈, 글자자르기 CSS
411	jQuery Mobile에서 유용한 코드 10가지.
410	jQuery Mobile에서 유용한 코드 10가지.
409	[jQuery]버튼 활성화, 비활성화
408	jQuery show() / hide() / toggle() 사용법
407	jquery 여러가지 이벤트
406	네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
405	[CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
404	[Mobile] - 모바일웹 Href 태그속성들
403	jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
402	jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
401	jquery 스크립트내 특정값 확인하기 (디버깅)
400	jquery cookie (jquery.cookie.js)
399	jquery 다른버전 추가 사용시 충돌 방지 (카페24 스마트디자인 기본내장 jquery 1.4.4 버전과 충돌시 해결방법)
398	[jQuery] animate()에서 stop()의 중요성
397	javascript audio파일 재생
396	[jQuery.$ajax]mysql + php 서버에서 json 데이터 얻어오기