[Css] 넘치는 Text 생략(...) 처리하기

---

text를 …처리 하는 이유

상황에 따라 text가 다 보이는 것 보다 생략 처리를 하여 궁굼증을 유도할 수 있다.

---

…처리하기

App.css

.container{
    margin: 20px;
    width: 200px;
    background-color: bisque;
}

App.js

import React from "react";
import "./App.css";

const App = () => {
  return (
    <div className="container">
      안녕하세요 저는 React를 공부하고 있는 000입니다 여러분은
    </div>
  );
};

export default App;

아래와 같이 글이 넘쳐서 3줄로 변해버렸다.

그럼 이제 css를 변화시켜 주어진 width까지만 표현되고 생략(...)처리까지 해보자

App.css

.container {
  white-space: nowrap; /* 자식요소가 부모에 width를 넘을 시 자동으로 줄을 바꾸는걸 막기*/
  overflow: hidden; /* 부모요소 밖으로 삐져 나가는건 모두 안보이게 된다.*/
  text-overflow: ellipsis; /* 넘치는 text 끝 부분에 생략(...) 처리*/
  margin: 20px;
  width: 200px;
  background-color: bisque;
}

그럼 아래와 같이 어떤 게시글에 제목이라면 클릭을 유발하는 text 생략(...) 처리가 완성

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.