긴글을 "..." 으로 자르기

일자 : 2017. 5. 22(월)

목표 :지정된 넓이 보다 긴 글을 보기 좋게 하자.

- 행을 바꾸어 주어서 너비에 맞게 하기

- (선택) 너비가 넘어가면 글자를 자르고 "..." 보여주기 

수행결과 : 1가지 속성값으로 되지 않으며, 각 속성값이 이해해야 수정이 가능할 것 같다.

- 적용해야 하는 속성값은 "display, overflow, white-space, text-overflow" 이다.

.rankTitle{

position: relative;

left: 3rem;

width: 250px;

display: inline-block;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

-- display값은 화면에 보여주는 속성 : inline은 한줄로 보여준다.(<span>과 같음), block은 한줄에 같이 못쓴다. (<p>와 같다.)

-- overflow값은 화면에 넘어가는 것들을 어떻게 할지 결정한다. : hidden으로 하면 화면으로 넘어가는 것은 숨김 처리를 한다.

-- white-space값은 단어를 개행하는 속성값이다. : nowrap을 하면 한줄에 다 나타낸다.

-- text-overflow 글자가 범위를 넘어가면 결정하는 속성값이다. : ellipsis으로 하면 ... 으로 나타낸다.