ellipsis "..." 이 안나와요. 뭐가 잘못된 걸까요? 채택완료
지니아이
2년 전
조회 1,915
특정 부분에 글자수를 조정하려 합니다.
※ 사진첨부 ( 1번 끝에 강산에라는 글자가 잘러버려요. )
<div class="ellipsis">
1. 아름다운이땅에금수강산에단군할아버지가
2. 두번째 일정
</div>
이렇게 한것인데
그누 자체의 ellipsis 를 적용해도 그렇고
css 파일 하나 만들어서
.schedule_ellipsis {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="schedule_elipsis">
내용
</div>
이렇게 해도 줄이면서 "..." 이게 표시되어야 하는데, 그냥 단순하게 글자가 잘려버려요.
무엇이 문제일까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 8개
�
웅프
2년 전
�
지니아이
2년 전
앗. 저건 오타네요. schedule_ellipsis 로 정확히 쳤어요.
근데 부모요소에 overflow: hidden; 속성이 설정되어 있는지 확인해 보라는건
어디서 확인해야 하나요? ㅠㅠ
전체 소스보기해서 overflow:hidden; 이 있는지를 봐야하는건지 ㅠ
근데 부모요소에 overflow: hidden; 속성이 설정되어 있는지 확인해 보라는건
어디서 확인해야 하나요? ㅠㅠ
전체 소스보기해서 overflow:hidden; 이 있는지를 봐야하는건지 ㅠ
�
웅프
2년 전
class="schedule_ellipsis" 이것의 어미요 css 확인해보셔요
즉
text-overflow: ellipsis;가 제대로 작동하려면?
부모 요소의 너비(width)가 설정되어 있어야 합니다.
부모 요소가 충분한 너비를 가지지 않으면 텍스트가 줄여지는 대신 단순하게 잘림니다.
즉
text-overflow: ellipsis;가 제대로 작동하려면?
부모 요소의 너비(width)가 설정되어 있어야 합니다.
부모 요소가 충분한 너비를 가지지 않으면 텍스트가 줄여지는 대신 단순하게 잘림니다.
�
웅프
2년 전
<div class="parent-element">
<div class="schedule_elipsis">
내용
</div>
</div>
그리고 css 는
.parent-element {
width: 100%;
}
.schedule_ellipsis {
// width: 100%;
동일
}
이렇게 부모를 만들어서 해보세요
<div class="schedule_elipsis">
내용
</div>
</div>
그리고 css 는
.parent-element {
width: 100%;
}
.schedule_ellipsis {
// width: 100%;
동일
}
이렇게 부모를 만들어서 해보세요
�
지니아이
2년 전
아...답변 감사드립니다. 채택갑니다!! ㅎㅎ
아! 한가지만 더 여쭤봐도 될까요?
혹시 만약에 어떤 문서에 저렇게 ellipsis 로 말줄임이 되어 있는 것을 푸는 것도 있나요?
처음부터 긴 것을 말줄임했다가 다시 푸는게 아니고
처음부터 말줄임 되어 있는 곳을, 말줄임 하지 않게 입력한 그대로 출력하는 소스요.
.ellipsis css가 적용되어 있는 문서가 있는데, 이것을 떠나서
제가 직접 원하는 곳에
<div style="overflow:hidden; text-overflow: ellipsis;"> 이런식으로 별도로 해주듯이
.ellipsis css 가 적용되어 있는 문서에 이것을 말줄임 하지 않고, 내용 입력한 그대로 출력하는
style="" 요소요
아! 한가지만 더 여쭤봐도 될까요?
혹시 만약에 어떤 문서에 저렇게 ellipsis 로 말줄임이 되어 있는 것을 푸는 것도 있나요?
처음부터 긴 것을 말줄임했다가 다시 푸는게 아니고
처음부터 말줄임 되어 있는 곳을, 말줄임 하지 않게 입력한 그대로 출력하는 소스요.
.ellipsis css가 적용되어 있는 문서가 있는데, 이것을 떠나서
제가 직접 원하는 곳에
<div style="overflow:hidden; text-overflow: ellipsis;"> 이런식으로 별도로 해주듯이
.ellipsis css 가 적용되어 있는 문서에 이것을 말줄임 하지 않고, 내용 입력한 그대로 출력하는
style="" 요소요
�
웅프
2년 전
네 있죠 백업해서 변수에 저장하는 방식으로 스크립트 처리 하면됩니다.
�
웅프
2년 전
// .schedule_ellipsis 선택 하고, 백업하고,교체하고,출력
<script>
var ellipsisElement = document.querySelector('.schedule_ellipsis');
var originalText = ellipsisElement.textContent;
ellipsisElement.textContent = originalText;
console.log(originalText);
</script>
<script>
var ellipsisElement = document.querySelector('.schedule_ellipsis');
var originalText = ellipsisElement.textContent;
ellipsisElement.textContent = originalText;
console.log(originalText);
</script>
�
웅프
2년 전
.ellipsis 클래스 그대로출력을 할려면 다음과 같이 처리하면됩니다.
<div style="overflow: visible; white-space: normal;">
아름다운이땅에금수강산에단군할아버지가
</div>
그런데 만약에 위에처럼
<div class="ellipsis">
1. 아름다운이땅에금수강산에단군할아버지가
2. 두번째 일정
</div>
이대로 출력을 원한다면 다음과같이 처리하면되구요
<div class="ellipsis" style="white-space: normal; overflow: visible;">
1. 아름다운이땅에금수강산에단군할아버지가
2. 두번째 일정
</div>
참고로 https://www.w3schools.com/cssref/css3_pr_text-overflow.php 여기 참조하시고 공부하시면됩니다. ^
<div style="overflow: visible; white-space: normal;">
아름다운이땅에금수강산에단군할아버지가
</div>
그런데 만약에 위에처럼
<div class="ellipsis">
1. 아름다운이땅에금수강산에단군할아버지가
2. 두번째 일정
</div>
이대로 출력을 원한다면 다음과같이 처리하면되구요
<div class="ellipsis" style="white-space: normal; overflow: visible;">
1. 아름다운이땅에금수강산에단군할아버지가
2. 두번째 일정
</div>
참고로 https://www.w3schools.com/cssref/css3_pr_text-overflow.php 여기 참조하시고 공부하시면됩니다. ^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
부모 요소에 overflow: hidden; 속성이 설정되어 있는지 확인하세요.
만약에 속성이 없거나 다른 값으로 설정되어 있다면,
text-overflow: ellipsis;가 올바르게 동작하지 않을 수 있다는점 참조하세요