Home »

블로그 » 워드프레스

워드프레스 본문 태그 css로 줄 바꿈 하는 방법

자몽러

07/03/2025

워드프레스 글 본문에 태그를 많이 넣었다가 글자 정렬과 태그끼리 자동 줄 바꿈이 되지 않는 현상을 발견했다. 이건 전체 본문 가로보다 태그 영역 폭이 넓어져서 그러는데 아래와 같은 모습이다.

이 블로그 테마는 태그 글자가 가로로 정렬되어 있는 설정이다. 하지만 가짓수가 많아지니 전체 태그 폭이 본문보다 길어져서 위처럼 글자 줄 바꿈이 일어났다.

특히 가로 너비가 좁은 모바일에서는 아예 글자가 세로 정렬이 되었다. 그리고 그 상태로 화면을 빠져나간 태그도 보이는데 바로 해결해 보자.

먼저 크롬에서 F12 개발자 도구를 열고 태그 영역을 검사하면 해당 css 클래스 이름을 볼 수 있다. 이 블로그는 gb-container-e4c1b00d로 되었지만, 워드프레스 테마에 따라 달라지기 쉬우니 꼭 직접 검사해서 확인하는 것을 추천한다.

블로그 개발자도구 검사로 CSS 요소 확인하는 방법

1
2
3
4
5
6
7
8
/* Post Tag */
.gb-container-e4c1b00d {
 display: flex; 
  flex-wrap: wrap;  
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}
cs