시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > CSS > 기타효과 > 코딩시 텍스트 한줄로 표현하기 상세정보
사이트등록
현재접속자 새로고침
코딩시 텍스트 한줄로 표현하기
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 기타효과
다운로드 횟수 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을 줘서 블록 속성을 지정.
​ 

네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
:우울해:
2017-10-12 14:42:22
슈퍼짱맨
찬성 0
반대 0
:왕하하: 퍼가욤,,
2015-10-15 10:04:05
안치훈
찬성 27
반대 26
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 44433733 보이는 도배방지키를 입력하세요.