• 회원가입
  • 로그인
  • 구글아이디로 로그인

[text] CSS - direction 속성 - 텍스트방향 (= 텍스트진행방향 = direction속성 = 디렉션속성) ※ 텍스트앞 말줄임표

목차
  1. direction 예제 - 텍스트 방향
  2. direction 정의
  3. direction 구문
  4. direction 예제 - 텍스트 앞 말줄임표

 

direction 예제 - 텍스트 방향 

 

<style>

p.rtl {

  direction: rtl;

}

</style>


<p>홈짱닷컴 Homzzang.com</p>

<p class="rtl">홈짱닷컴 Homzzang.com</p>

 

결과보기

 

direction 정의

 

블록요소 내에서 (텍스트방향 / 쓰기방향) 지정.

즉,

블럭요소의 텍스트가 왼쪽에서 오른쪽으로 갈지, 오른쪽에서 왼쪽에서 갈지 지정할 때 사용.

 


 

1.

  • 가능한, CSS direction 속성 대신 HTML dir 속성 사용 권장.
  • 이 특성을 unicode-bidi 특성과 함께 사용해, 동일문서에서 여러 언어 지원하도록 텍스트를 대체해야하는지 여부 설정.

 

2.

  • 기본값 : ltr
  • 상속여부 : O
  • 애니가능 : X
  • CSS버전 : CSS2
  • JS구문 : object.style.direction="rtl";

 

3.

주요 최신브라우저 모두 지원.

 

4. MDN direction 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/direction

 

 

direction 구문

 

selector {direction: 속성값;}

 


[속성값]

 

ltr

왼쪽에서 오른쪽으로 (Left To Right). (기본값)

 

rtl

오른쪽에서 왼쪽으로 (Right To Left).

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속

 

 

direction 예제 - 텍스트 앞 말줄임표

 

<style>

div {

    width:100px; 

    display:block;  

    text-overflow:ellipsis; 

    overflow:hidden; 

    white-space:nowrap; 

    direction:rtl; 

    text-align:left;

}


<div>홈짱닷컴 Homzzang.com</div>

 

결과보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
text CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = co…
text CSS - direction 속성 - 텍스트방향 (= 텍스트진행방향 = direction속성 = 디렉션속성)…
text CSS - letter-spacing 속성 ★ - 글자 간격 사이사이 띄우기 ( 텍스트사이띄우기 = 문자 간…
text CSS - line-height 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 =…
text CSS - text-align 속성 ★ - 텍스트정렬 (= text-align속성 = 텍스트얼라인속성)
text CSS - text-decoration 속성 ★ - 텍스트라인 꾸미기 (= 밑줄/밑선, 가운데줄/취소선, 윗…
text CSS - text-indent 속성 ★★ - 단락 첫줄 텍스트 들여쓰기 (= text-indent속성 = …
text CSS - text-transform 속성 - 텍스트 대소문자변환 (= text-transform속성 = 텍…
text CSS - word-spacing 속성 ★ - 텍스트 단어간 간격 (= 단어간격 = word-spacing…
text CSS - vertical-align 속성 ★ - 텍스트수직정렬 (= vertical-align속성 = 버티…
text CSS - white-space 속성 ★ - 공백처리/줄바꿈 지정 (= white-space속성 / 화이트스…
text CSS - unicode-bidi 속성 - 텍스트글자방향 (= unicode-bidi속성 = 유니코드비디속성…
text CSS - text-align-last 속성 - 단락마지막라인정렬 (= text-align-last속성 = …
text CSS - text-emphasis 속성 - 텍스트 강조마크의 '모먕/색깔' 일괄 지정 (= 텍스트 글자 위…
text CSS - text-justify 속성 - 텍스트 좌우균분정렬 세부설정 (= text-justify속성 = …
text CSS - text-overflow 속성 ★ - 영역 이탈 글자 처리 (= text-overflow속성 = …
text CSS - word-break 속성 ★ - 한중일 외의 언어 (단어기준/글자기준) 줄바꿈규칙 지정 (= 줄…
text CSS - word-wrap 속성 ★ - 단어줄바꿈 위해 긴단어쪼개기 (= 긴단어깨기 = 긴단어나누기 = w…
text CSS - text-fill-color 속성 (비표준) - 텍스트글자색 (= 글자전경색 =text-fill-…
text CSS - text-decoration-line 속성 - 텍스트라인위치종류 (= text-decoration…
1/2
목록
찾아주셔서 감사합니다. Since 2012