ellipsis 로 글자 짜르기
본문
.overflow-ellipsis {
text-overflow: ellipsis;
}
위 코드는 div width를 300px 로 한정할때는 잘 작동하는데,
100% 로 해놓으면 핸드폰에서도 옆으로 화면 뚥고 나가더라구요.
이거 어떻게 100% 로 설정해도 화면에 보이는 div 크기만큼 글자 길이 짜르나요?
답변 3
다음과 같이 해볼 수 있을 것 같습니다.
.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%;를 적용하여 너비가 가변적으로 조절될 수 있도록 하고, 뷰포트를 벗어나지 않도록 최대 너비를 제한 할 수 있겠습니다.
text-overflow : ellipsis;
overflow : hidden;
white-space : nowrap;
이렇게 줘보세요
div를 싸고 있는 부분이 어떤지 알아야 합니다..
답변을 작성하시기 전에 로그인 해주세요.
