728x90
반응형
요소들을 리스트로 보여주는데, 제목이 너무 길어서 넘어가는 문제가 생겼다.
줄을 넘어가면 grid 가 흐트러지기도하고, 보기에도 통일성이 없어보여서 너무 길면 적당히 자르고 끝에 ... 을 붙이도록 해봤다.
현재는 위와 같은 상태이다.
맨 오른쪽 요소를 보면 제목이 너무 길어서 아래줄까지 침범했다.
저 제목 데이터는 name 이라는 변수에 들어있었는데,
processedName 이라는 이름의 변수로 새로 만들어줬다.
const processedName = name.length > 15 ? `${name.slice(0, 15)}...` : name;
나는 15자가 넘어갈 경우 문자열을 자르고, 끝에 ... 이 붙도록 코드를 작성해봤다.
processedName 변수를 적용해서 다시 화면을 구성해보겠다.
원하는 대로 적용이 된 모습이다.
728x90
반응형