다음 줄로 넘어가지 않고 "..."으로 표시되도록 하는 방법

 

 

HTML의 <li> 태그 안의 글자가 특정 공간 안에 다 들어가지 않을 때, 다음 줄로 넘어가지 않고 "..."으로 처리하여 가독성을 높이고 디자인을 깔끔하게 유지할 수 있습니다.

CSS를 활용한 해결 방법

다음과 같은 CSS 속성들을 조합하여 원하는 결과를 얻을 수 있습니다.

CSS

 

li {
  width: 150px; /* li 요소의 너비를 지정 */
  white-space: nowrap; /* 글자를 한 줄에 모두 표시 */
  overflow: hidden; /* 내용이 넘칠 경우 숨김 */
  text-overflow: ellipsis; /* 넘친 부분을 생략 기호로 표시 */
}

• width: <li> 요소의 너비를 지정하여 글자가 표시될 공간을 제한합니다.
• white-space: nowrap: 글자를 한 줄에 모두 표시하도록 설정합니다.
• overflow: hidden: 내용이 너비를 초과할 경우 숨깁니다.
• text-overflow: ellipsis: 숨겨진 부분을 생략 기호(...)로 표시합니다.

예시

HTML

 

<ul>
  <li>매우 긴 제목이 여기에 들어갑니다.</li>
  <li>이것도 긴 제목입니다.</li>
</ul>

CSS

 

ul li {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

위 예시처럼 CSS를 적용하면 <li> 요소의 내용이 지정된 너비를 초과할 경우 자동으로 "..."으로 처리됩니다.

추가 설명

• 다른 요소에도 적용 가능: <li> 태그뿐만 아니라 <p>, <div> 등 다른 요소에도 동일한 CSS를 적용하여 같은 효과를 얻을 수 있습니다.
• 반응형 디자인: 화면 크기에 따라 너비를 조절하여 반응형 디자인에 적용할 수 있습니다. 예를 들어, 미디어 쿼리를 이용하여 다양한 화면 크기에 맞춰 스타일을 변경할 수 있습니다.
• 단어 단위 자르기: word-break: break-all; 속성을 추가하면 단어 중간에서 자를 수 있습니다. 하지만 가독성이 떨어질 수 있으므로 주의해야 합니다.

 

h3 태그 내 글자 줄바꿈 방지 및 생략 기호 처리 방법

문제 분석

현재 h3 태그에 over 클래스가 적용되어 있고, 해당 클래스에 스타일을 추가하여 글자가 다음 줄로 넘어가지 않고 ...으로 표시되도록 만들고 싶은 상황입니다.

해결 방법

다음과 같이 CSS를 작성하여 over 클래스에 적용하면 됩니다.

CSS

 

.over {
  width: 200px; /* 원하는 너비로 설정 */
  white-space: nowrap; /* 글자를 한 줄에 모두 표시 */
  overflow: hidden; /* 내용이 넘칠 경우 숨김 */
  text-overflow: ellipsis; /* 넘친 부분을 생략 기호로 표시 */
}

각 속성의 의미

• width: 요소의 너비를 지정합니다. 이 값을 조절하여 글자가 표시될 공간을 제한할 수 있습니다.
• white-space: nowrap: 글자를 한 줄에 모두 표시하도록 설정합니다.
• overflow: hidden: 내용이 너비를 초과할 경우 숨깁니다.
• text-overflow: ellipsis: 숨겨진 부분을 생략 기호(...)로 표시합니다.

전체 코드 예시

HTML

 

<h3 class="over">[어프어프X오얼모얼]더블 문어빵 치치-YELLOW(웨이브라벨)</h3>

CSS

 

.over {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

추가 설명

• 너비 조절: width 값을 조절하여 원하는 만큼 글자를 자를 수 있습니다.
• 다른 요소에도 적용: h3 태그뿐만 아니라 div, span 등 다른 요소에도 동일한 CSS를 적용할 수 있습니다.
• 반응형 디자인: 미디어 쿼리를 사용하여 화면 크기에 따라 너비를 조절하면 반응형 디자인에 적용할 수 있습니다.
• 단어 단위 자르기: word-break: break-all; 속성을 추가하면 단어 중간에서 자를 수 있지만, 가독성이 떨어질 수 있습니다.

주의 사항

• 브라우저 호환성: 모든 브라우저에서 동일하게 작동하는 것은 아니므로 주요 브라우저에서 테스트해 보는 것이 좋습니다.
• 접근성: 시각 장애인을 위한 스크린 리더는 ...으로 표시된 부분을 읽지 못할 수 있습니다. 이러한 경우, title 속성을 사용하여 전체 텍스트를 제공하는 것이 좋습니다.

예시:

HTML

 

<h3 class="over" title="어프어프X오얼모얼 더블 문어빵 치치-YELLOW(웨이브라벨)">
  [어프어프X오얼모얼]더블 문어빵 치치-YELLOW(웨이브라벨)
</h3>

위와 같이 title 속성을 추가하면 마우스를 올렸을 때 전체 텍스트를 확인할 수 있습니다.