본문 바로가기
frontend/html5

[Hoon] ellipsis - CSS3 text-overflow Property

by 훈즈 플로거 2017. 8. 16.

CSS3 text-overflow Property

 
Use of the text-overflow property:

 

 
div {
    text-overflow: ellipsis;
}
 

Definition and Usage

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

Default value:

clip

Inherited:

no

Animatable:

no. Read about animatable

Version:

CSS3le.textOverflow="ellipsis"

JavaScript syntax:

object.style.textOverflow="ellipsis"

CSS Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

Property Values

Value

 Description

 clip

 Default value. Clips the text

 ellipsis

 Render an ellipsis ("...") to represent clipped text

 string

 Render the given string to represent clipped text

 initial

 Sets this property to its default value. 

 inherit

 Inherits this property from its parent element.

 

Example

 

<style>
#div1 {    
    	white-space: nowrap;     
        width: 12em;     
        overflow: hidden;    
        text-overflow: clip;     
        border: 1px solid #000000;
        }
#div2 {    
    	white-space: nowrap;     
        width: 300px;     
        overflow: hidden;    
        text-overflow: ellipsis;     
     }
</style>

 

This document refers to W3Schools.com

 

bit.ly/2LMzjNC

 

커피한잔(5000원) 으로 배우는 Vue.js 개념 핵심 강의! - 인프런 인강 55% 할인 쿠폰

커피한잔(5000 원) 으로 배우는 Vue.js 개념 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% 할인쿠폰! [Vue.js] javascript Real

plogger.tistory.com

bit.ly/2TtRHis

 

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

 

'frontend > html5' 카테고리의 다른 글

[Hoon] ellipsis - CSS3 text-overflow Property  (0) 2017.08.16
실전 HTML 5 가이드 - Web Standards Korea  (0) 2010.12.26

댓글0