ellipsis "..." 이 안나와요. 뭐가 잘못된 걸까요?

ellipsis "..." 이 안나와요. 뭐가 잘못된 걸까요?

QA

ellipsis "..." 이 안나와요. 뭐가 잘못된 걸까요?

본문

특정 부분에 글자수를 조정하려 합니다.

 

※ 사진첨부 ( 1번 끝에 강산에라는 글자가 잘러버려요. )

832887083_1693735301.6415.png

 

<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

<div class="schedule_elipsis">

오타있네요 schedule_ellipsis 

그리고
부모 요소에 overflow: hidden; 속성이 설정되어 있는지 확인하세요.
만약에 속성이 없거나 다른 값으로 설정되어 있다면,
text-overflow: ellipsis;가 올바르게 동작하지 않을 수 있다는점 참조하세요

앗. 저건 오타네요. schedule_ellipsis 로 정확히 쳤어요.

근데 부모요소에 overflow: hidden; 속성이 설정되어 있는지 확인해 보라는건
어디서 확인해야 하나요? ㅠㅠ
전체 소스보기해서 overflow:hidden; 이 있는지를 봐야하는건지 ㅠ

class="schedule_ellipsis" 이것의 어미요 css 확인해보셔요

text-overflow: ellipsis;가 제대로 작동하려면?
부모 요소의 너비(width)가 설정되어 있어야 합니다.
부모 요소가 충분한 너비를 가지지 않으면 텍스트가 줄여지는 대신 단순하게 잘림니다.

<div class="parent-element">
  <div class="schedule_elipsis">
    내용
  </div>
</div>

그리고 css 는
.parent-element {
  width: 100%;
}
.schedule_ellipsis {
// width: 100%;
동일
}

이렇게 부모를 만들어서 해보세요

아...답변 감사드립니다. 채택갑니다!! ㅎㅎ
아! 한가지만 더 여쭤봐도 될까요?
혹시 만약에 어떤 문서에 저렇게 ellipsis 로 말줄임이 되어 있는 것을 푸는 것도 있나요?

처음부터 긴 것을 말줄임했다가 다시 푸는게 아니고
처음부터 말줄임 되어 있는 곳을, 말줄임 하지 않게 입력한 그대로 출력하는 소스요.

.ellipsis css가 적용되어 있는 문서가 있는데, 이것을 떠나서
제가 직접 원하는 곳에
<div style="overflow:hidden; text-overflow: ellipsis;"> 이런식으로 별도로 해주듯이

.ellipsis css 가 적용되어 있는 문서에 이것을 말줄임 하지 않고, 내용 입력한 그대로 출력하는
style="" 요소요

// .schedule_ellipsis 선택 하고, 백업하고,교체하고,출력
<script>
  var ellipsisElement = document.querySelector('.schedule_ellipsis');
  var originalText = ellipsisElement.textContent;
  ellipsisElement.textContent = originalText;
  console.log(originalText);
</script>

.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 여기 참조하시고 공부하시면됩니다. ^

답변을 작성하시기 전에 로그인 해주세요.
전체 11
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT