HTML_CSS_037_css_text-overflow

html

<div>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate veniam cum, corrupti praesentium sit, atque ad optio inventore omnis quod nostrum amet eveniet? Assumenda labore accusamus soluta adipisci, aliquam veniam?
</div>

css

div {
  padding:10px;
  font-size:2rem;
  width:1000px;
  margin:0 auto;
  background-color:red;
  white-space:nowrap;
  overflow-x:hidden;
  /* 넘쳐서 숨겨지는 텍스트 ... 처리 */
  text-overflow:ellipsis;
}

주의 !

text-overflow:ellipsis; 사용 시
overflow-x:hidden; 옵션도 같이 사용해서 숨겨준다.