[react] 긴 텍스트 말줄임 방법 질문합니다

Question

긴 텍스트가 화면을 넘어갈 경우 css로 말줄임을 적용하려고 했는데 여러가지 문제가 있어서 질문합니다.

길이가 긴 텍스트

.text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }이런식으로 css를 적용하려고 했는데 상위에 display:flex가 적용된 경우 텍스트 영역 사이즈가 고정되어서 화면 밖을 넘어가 버립니다. 아래 코드가 문제가 생기는 코드입니다.

길이가 긴 텍스트

.container1 { display:flex } .container2 { display:flex } .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }이런 경우 .container2 에도 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 를 적용해주면 화면 사이즈에 따라 텍스트 영역이 줄어들게 됩니다.하지만 실제 프로젝트에선 상위 컴포넌트도 많고 화면 하나 그릴때도 상위 태그들이 너무 많아서요. 텍스트 하나 말줄임 처리하는데 모든 상위 태그에 일일이 적용시켜 주는건 코드가 너무 난잡해 지는 느낌이 듭니다.다른 해결방법으론 화면 사이즈를 계산해 말줄임으로 바꿔주는 함수를 작성하거나, 일정 글자수 이상인 텍스트를 말줄임으로 바꿔주는 방법이 있지만, 한글이나 영어에 따라 문자열 길이가 달라지는 문제가 있었습니다.말줄임을 적용하려는 화면은 개인 공부로 개발중인 목록의 item text 부분입니다.리스트를 화면 사이즈에 맞추지 않고 고정 사이즈로 하는 방법도 생각중이긴 하지만, 한 번 방법이 있는지 찾아보고 싶었어요.css 가 아직 미숙해서 어떻게 해결해야 좋을지 잘 모르겠네요. css 가 아니더라도 다른분들은 말줄임을 적용할 때 어떤식으로 개발하는지 의견을 주시면 감사하겠습니다.

1004hd · Answer

.text에 width를 주셔야 할 것 같네요100% or 고정값 주시면 되겠습니다

킁킁탐정 · Answer

다음 처럼 min-width를 0으로 주는 트릭을 쓰면 됩니다.https://play.tailwindcss.com/5qlNbaQagg?size=338x720.container2 { display:flex; min-width: 0px; }

chief · Answer

왜 그런지를 대략 말로 적어보면.text div 는 원래 block 요소이기 때문에 별 다른 스타일 추가 없이도 자신의 부모 요소의 가로 사이즈에 꽉 차게 사이즈가 잡혀야 하나..부모에 flex 가 지정되면서 flex-item 으로의 속성이 적용되어 사이즈가 정해지지 않고 유동적인 상태가 되었습니다.나는 정해진 사이즈가 없이 작은걸 담으면 작게 큰걸 담으면 크게 되겠다는건데문제는 정해진 사이즈가 없다보니 어디가 끝인지도 없어서 말줄임 적용이 안된다 이런식으로 보시면 될 것 같습니다해결 방법은 부모에게 flex 관련 속성으로 꽉 차게 하든 .text 에 width 나 flex-grow, flex-basis 를 주는 방법 등 아마 사이즈를 정해줄 수 있는 것을 넣으시면 엔간하면 적용 될 거 같아요

[react] 긴 텍스트 말줄임 방법 질문합니다

3개의 답변

Q&A 목록