코딩시 텍스트 한줄로 표현하기 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기타효과 > 코딩시 텍스트 한줄로 표현하기 상세정보

클라우드태그

Javascript

PHP

asp

CSS

html

mysql

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

코딩시 텍스트 한줄로 표현하기

해피팀

네티즌

소스분류

기타효과

다운로드 횟수

0 회

간단설명

코딩시 길게 늘어지는 텍스트를 한줄로 표현하는 CSS를 이용한 방법

평가하기

white-space :
공백문자 다루는 방법을 지정하는 코드. (HTML 상에서 띄어쓰기 또는 줄바꿈, 탭으로 인한 공백 등등)

white-space : normal; - 기본값, 연속 공백과 줄바꿈 등은 통합해서 표현
white-space : pre; - 원문 그대로 출력. normal과 반대.
white-space : nowrap; - 스페이스 바를 막 눌러서 들어가는 연속 공백은 통합되지만 (normal의 효과) 줄바꿈은 인정함.
white-space : inherit; - 부모 요소의 값을 상속

-------------------------------------------------------------------------------------------
word-break :
텍스트가 들어가는 블록 요소의 가로에 맞춰 줄바꿈 여부를 설정하는 코드. 강제줄바꿈 방지. 텍스트길이제한.

word-break : normal; -> 기본값, 단어단위로 끊어서 줄바꿈.
word-break : break-all; -> 특수문자를 제외하고 강제로 줄바꿈.
word-break : break-word; -> 특수문자를 포함하고 강제 줄바꿈.
word-break : nowrap; -> 줄바꿈하기 싫을 때
word-break : keep-all; -> 한글일 경우 띄어쓰기 기준으로 짤림.

-------------------------------------------------------------------------------------------
word-wrap:
텍스트가 들어가는 블록요소 사이즈에 따라 줄바꿈

word-wrap : break-word; - 가로 사이즈나 엘러먼트에 맞춰서 강제 줄 바꿈 해준다. word-break : break-all; 같은결과물

-------------------------------------------------------------------------------------------
text-overflow:
긴문자열을 잘라주는 형태지정

text-overflow : clip; 엘리먼트의 테두리에 맞춰서 글자를 자른다.
text-overflow : ellipsis;
잘라지는 끝 부분에 자동으로 '...'을 넣어준다. (ie6이상에서만 지원가능. 파폭은 안됨.)
* width 값이 지정되어야함. / 높이를 정해주거나 white-space : nowrap; 속성을 사용해야함.
* span이나 a태그에 사용할 때는 display : inline-block을 줘서 블록 속성을 지정.