[CSS] 넘치는 텍스트 컨텐츠 숨기고 '...' 찍기

 

아래는 팀 프로젝트를 하면서 가수 리스트를 보여주는 컨텐츠에 더미 데이터를 넣은 것이다. (사진과 가수명은 일절 관계가 없습니다...)

가수 이름을 길게 넣었더니 아래 사진과 같이 가수 이름의 길이만큼 여러 줄로 늘어나 미관이 좋지 않았다. 

 

 

다른 블로그를 참고해 간단하게 수정했다. 

아래 코드를 전부 넣어주면 된다. 

 

white-space: nowrap; //줄바꿈 방지
overflow: hidden; //넘치는 텍스트 숨기기
text-overflow: ellipsis; //말줄임 기호(...)넣기

 

그럼 대부분의 경우 잘 작동할 것이다. 

 

 

+

그런데 나의 경우 위 코드를 <p>태그 안에 넣었더니 아래와 같이 오히려 옆으로 침범하는 현상이 발생했다.

 

 

왜일까. 코드를 까보자.

 

 

우리 팀은 스타일드 컴포넌트를 사용하는데, 위쪽 ArtistDetail이 <div>, 아래쪽 Artistcontent가 <p>다. 

자세히 보니 기본 디자인이 텍스트를 p로 감싸고 그 p를 다시 div로 감싸는 형태로 만들어져 있었는데(<div><p>{가수이름}</p></div>), div태그 안에 없어도 사용에 지장이 없는 속성 3개가 들어있었다 (드래그된 부분). 

 

 

저 속성들을 삭제하니 정상 작동하는 모습을 볼 수 있다.

스크린샷엔 찍히지 않은 더 바깥쪽에 있는 css의 속성이 저 세 가지 속성과 충돌하면서 (특히 flex-direction: colum 부분) 문제를 일으킨 듯 하다. 

 

 

 

---

참고자료

https://wooncloud.com/78