[Hoon] ellipsis - CSS3 text-overflow Property

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% 할인 쿠폰

bit.ly/2TtRHis

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