SIR
목록으로

ellipsis 로 글자 짜르기 채택완료

울울라프
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 2,357
답변 3
목록

Copy 
.overflow-ellipsis {
  text-overflow: ellipsis;
}
 

 

위 코드는 div width를 300px 로 한정할때는 잘 작동하는데, 

100% 로 해놓으면 핸드폰에서도 옆으로 화면 뚥고 나가더라구요.

 

이거 어떻게 100%  로 설정해도 화면에 보이는 div 크기만큼 글자 길이 짜르나요?

#css

답변 3개

채택된 답변
+20 포인트

다음과 같이 해볼 수 있을 것 같습니다.

Copy 
.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 추가 스타일링 */
div {
  width: 100%;
  max-width: 100%; /* 뷰포트를 벗어나지 않도록 최대 너비 제한 */
  padding: 10px;
  border: 1px solid #ccc;
}

 

white-space: nowrap;을 추가하여 텍스트가 한 줄에 표시되도록 하고, overflow: hidden;을 사용하여 텍스트가 넘치는 경우 숨김 처리합니다.

text-overflow: ellipsis;를 적용하여 생략 부호를 표시하시면 됩니다.

추가적으로 div 요소에는 width: 100%;와 max-width: 100%;를 적용하여 너비가 가변적으로 조절될 수 있도록 하고, 뷰포트를 벗어나지 않도록 최대 너비를 제한 할 수 있겠습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

div를 싸고 있는 부분이 어떤지 알아야 합니다..

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

text-overflow : ellipsis;

overflow : hidden;

white-space : nowrap;

 

이렇게 줘보세요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고