반응형 홈페이지를 제작하는데 게시판의 제목 길이를 어떤식으로 지정 해야 되나요?

반응형 홈페이지를 제작하는데 게시판의 제목 길이를 어떤식으로 지정 해야 되나요?

QA

반응형 홈페이지를 제작하는데 게시판의 제목 길이를 어떤식으로 지정 해야 되나요?

본문

3421627295_1562767965.789.png

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>

 

보통 해당 부분 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에 따라서 수정이 필요할수도 있습니다.

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

회원로그인

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