반응형 홈페이지를 제작하는데 게시판의 제목 길이를 어떤식으로 지정 해야 되나요?
본문
https://sir.kr/g5_skin/29988 현재 이스킨을 적용 중인데 줄이면 이런식으로 제목이 세로로 내려 가서 부자연 스럽네요 ㅠㅠ 자연스럽게 줄어들게 하고 싶은데 어떻게 해야 되나요?
게시판 제목을 2줄로, 나머지는 1줄로 고정하고 싶습니다
답변 4
길이가 있는데 자연스럽게 줄어들순 없어요. 아래 코드를 참고하세요.
어디 올려놓고 브라우저 가로폭을 줄였다 늘였다 테스트 한번 해보세요.
일정폭 이하가 되면 제일 긴 제목에 한줄(100%)을 할당하고
나머지 요소들은 아랫줄로 보내버리는 식이죠.
제목과 함께 기타 요소들을 한줄로 유지하려면 제목이 너무 길어서 밸런스가 무너져요
<style>
* { box-sizing:border-box; border:1px solid; }
#max-box { width: auto; max-width:1000px; }
#titles { width: 60%; float: left; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; }
#right-things { width: 40%; float: right; }
@media ( max-width: 720px ) {
#titles { float: none; width: auto; }
#right-things { float: none; width: auto; }
}
</style>
<div id="max-box">
<div id="titles"> 여기 제목 길게 길게 길게 길게 길게 길게 길게 길게 길게 길게 길게 </div>
<div id="right-things"> 우측요소1 우측요소2 우측요소3 우측요소4 </div>
</div>
디자인적인 부분은 정답은 없지만
저는 PC반응은 768정도까지만 맞추고
모바일은 이렇게 스킨 따로 사용합니다.
보통 해당 부분 css에 이렇게 많이 할겁니다.
.한줄 자르기 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.두줄 자르기 {
line-height: 15px; //줄간의 간격
max-height: 5em; //최대 높이
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; //자를 줄의 수
-webkit-box-orient: vertical;
}
부모 박스나 해당 css에 따라서 수정이 필요할수도 있습니다.
css로 처리합니다.
