[HTML&CSS] 텍스트 줄넘침 해결 방법(2가지)

방법1.

 - 이 방법은 overflow:hidden;으로 틀을 벗어나는 텍스트는 안보이게 하고, text-overflow:ellipsis;로 넘친 부분들을 말줄임표시로 나타내도록 하는 방법이다.

- white-space:nowrap; 넘치는 텍스트가 자동 줄바꿈이 되지 않도록 nowrap 속성을 부여해준다.

#box {

	width:100px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;

}

방법2.

 - 이 방법은 마찬가지로 overflow:hidden;으로 틀을 벗어나는 텍스트는 안보이게 하고, word-wrap:break-word;를 통해 단어를 기준으로 줄바꿈을 실시하는 속성을 부여해주는 방법이다.

#box {

	width:100px;
    overflow:hidden;
    word-wrap:break-word;
    
}