문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판 이전 판 다음 판 | 이전 판 | ||
html:css:text [2011/12/06 20:12] kwon37xi |
html:css:text [2012/05/25 12:14] (현재) kwon37xi [여러 줄 텍스트 길이 제한] |
||
---|---|---|---|
줄 3: | 줄 3: | ||
===== 텍스트 길이 제한 ===== | ===== 텍스트 길이 제한 ===== | ||
- | * 넓이가 지정된 영역의 경우 텍스트 길이를 CSS로 제한할 수 있다. 서버사이드에서 자르는 방식은 가변폭 글꼴 때문에 정확하게 작동할 수 없다. | + | 넓이가 지정된 영역의 경우 텍스트 길이를 CSS로 제한할 수 있다. 서버사이드에서 자르는 방식은 가변폭 글꼴 때문에 정확하게 작동할 수 없다. |
<code css> | <code css> | ||
/* 넓이가 명시된 상태 */ | /* 넓이가 명시된 상태 */ | ||
width: | width: | ||
+ | </ | ||
+ | |||
+ | ===== 여러 줄 텍스트 길이 제한 ===== | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | <code css> | ||
+ | /* WebKit */ | ||
+ | .giveMeEllipsis { | ||
+ | overflow: hidden; | ||
+ | text-overflow: | ||
+ | display: -webkit-box; | ||
+ | -webkit-line-clamp: | ||
+ | -webkit-box-orient: | ||
+ | } | ||
+ | |||
+ | /* Cross Browser 3줄일 경우.*/ | ||
+ | p { | ||
+ | position: | ||
+ | line-height: | ||
+ | height: | ||
+ | } | ||
+ | p::after { | ||
+ | content:" | ||
+ | font-weight: | ||
+ | position: | ||
+ | bottom:0; | ||
+ | right:0; | ||
+ | padding:0 20px 1px 45px; | ||
+ | background: | ||
+ | } | ||
</ | </ | ||
===== word-break ===== | ===== word-break ===== | ||
* break-all : 특수문자를 제외하고 강제 줄바꿈 | * break-all : 특수문자를 제외하고 강제 줄바꿈 | ||
- | * break-word : | + | |
* nowrap : width를 지정하였지만 개행이 되지 않기를 원할때 사용. | * nowrap : width를 지정하였지만 개행이 되지 않기를 원할때 사용. | ||
- | * word-break:keep-all : 텍스트가 한글일 경우 띄워쓰기 기준으로 개행된다. | + | * keep-all : 텍스트가 한글일 경우 띄워쓰기 기준으로 개행된다. |