그누보드 QA - ellipsis 로 글자 짜르기

ellipsis 로 글자 짜르기

울라프 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.07.11 17:34:24 946 (76.♡.♡.189)

본문


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

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

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

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

#css

답변 3

웹메이킹 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-07-11 18:51:45 39.♡.♡.46

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


.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%;를 적용하여 너비가 가변적으로 조절될 수 있도록 하고, 뷰포트를 벗어나지 않도록 최대 너비를 제한 할 수 있겠습니다.