문서의 선택한 두 판 사이의 차이를 보여줍니다.
다음 판 | 이전 판 | ||
html:css:text [2011/12/06 20:08] kwon37xi 새로 만듦 |
html:css:text [2012/05/25 12:14] (현재) kwon37xi [여러 줄 텍스트 길이 제한] |
||
---|---|---|---|
줄 2: | 줄 2: | ||
텍스트에 관련된 CSS 팁들을 모아본다. | 텍스트에 관련된 CSS 팁들을 모아본다. | ||
- | * '' | + | ===== 텍스트 길이 제한 ===== |
+ | 넓이가 지정된 영역의 경우 텍스트 | ||
+ | <code css> | ||
+ | /* 넓이가 명시된 상태 */ | ||
+ | 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 ===== | ||
+ | * break-all : 특수문자를 제외하고 강제 줄바꿈 | ||
+ | * **break-word** : 특수문자를 포함하고 강제 줄바꿈. break-word을 사용하면 대부분의 경우 해결 될 듯. | ||
+ | * nowrap : width를 지정하였지만 개행이 되지 않기를 원할때 사용. | ||
+ | * keep-all : 텍스트가 한글일 경우 띄워쓰기 기준으로 개행된다. |