토론방

분류목록

소스관련 모바일이나 모바일이 작아도 그냥 한화면에 꽉차게 가능한지요 글씨가 두줄이 안나오게

글씨가 두줄로 안나오게 가능한지요

지금은 웹반응형이라서 화면이 작으면 글씨가 밑으로 내려가서 보기가 싫다고 해서요

화면이 작든 크든 아래이미지처럼 한화면으로 보여지길 원해서요

어떤 부분을 수정해야할지 몰라서요

게시글 공유 URL복사
수정 삭제 출력
목록
댓글[1]

열기 닫기

  • 이**우 2018-05-09

    - 화면이 작아졌을 때, 인증제 명, 대상, 일정 같은 부분의 내용이 두줄이 되면 보기 싫어져서 그런것 같네요.

    - 해당 부분은 항상 한줄로 출력되도록 다음과 같이 추가하였습니다.

     

     

     

    1. 제목 부분 CSS

    - 한 줄로 출력되도록 white-space:nowrap; 을 추가하였습니다.

     

    2. 내용 부분 CSS

    - 한 줄로 출력되고 싶은 항목에만 적용되도록 .farm-A-nowrap {white-space:nowrap;} 을 추가하였습니다.

     

    3. 내용 부분 HTML

    - 한 줄로 출력되고 싶은 항목에 farm-A-nowrap class 를 추가하였습니다.

     

     

     

    # css


        @media (min-width:768px){
            .farm-A-mobile {display:none;}
            .farm-A-tablet-pc {display:block;}

            .farm-A-table > colgroup > col.farm-A-tablet-pc {display:table-column;}
            .farm-A-table > thead.farm-A-tablet-pc-header-group {display: table-header-group;}
            .farm-A-table > thead > tr > th {font-size:13px;white-space:nowrap;}
            .farm-A-table > thead > tr > th.farm-A-tablet-pc {display:table-cell;}
            .farm-A-table > tbody > tr.farm-A-mobile {display:none;}
            .farm-A-table > tbody > tr > th, .farm-A-table > tbody > tr > td {font-size:13px;}
            .farm-A-table > tbody > tr > th.farm-A-tablet-pc, .farm-A-table > tbody > tr > td.farm-A-tablet-pc {display:table-cell;}
            .farm-A-table.farm-A-row > tbody > tr > th {display:table-cell; text-align:center;}
            .farm-A-table.farm-A-row > tbody > tr > td {display:table-cell;}

            .farm-A-btn-wrap a {margin-left:6px;}
            .farm-A-btn-wrap a:first-child {margin-left:0;}
            .farm-A-btn-wrap .farm-A-half {display:inline-block;}
            .farm-A-btn-wrap .farm-A-half a {float:none; width:auto;}
            .farm-A-btn-wrap .farm-A-half a:first-child {float:none; width:auto;}
            .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle {}
            .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle.farm-A-medium {width:70px;}
            .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle.farm-A-big {width:110px;}

            .farm-A-btn-circle.farm-A-big {display:inline-block; width:110px; height:110px; padding:40px 0; border-radius:50%;}
          
            .farm-A-nowrap {white-space:nowrap;}
        }


        @media \0screen{
            .farm-A-mobile {display:none;}
            .farm-A-tablet-pc {display:block;}

            .farm-A-table > colgroup > col.farm-A-tablet-pc {display:table-column;}
            .farm-A-table > colgroup > col.farm-A-pc {display:table-column;}
            .farm-A-table > thead.farm-A-tablet-pc-header-group {display: table-header-group;}
            .farm-A-table > thead > tr.farm-A-mobile-tablet {display:none;}
            .farm-A-table > thead > tr > th {font-size:13px;white-space:nowrap;}
            .farm-A-table > thead > tr > th.farm-A-tablet-pc {display:table-cell;}
            .farm-A-table > thead > tr > th.farm-A-pc {display:table-cell;}
            .farm-A-table > tbody > tr.farm-A-mobile {display:none;}
            .farm-A-table > tbody > tr.farm-A-mobile-tablet {display:none;}
            .farm-A-table > tbody > tr > th, .farm-A-table > tbody > tr > td {font-size:13px;}
            .farm-A-table > tbody > tr > th.farm-A-tablet-pc, .farm-A-table > tbody > tr > td.farm-A-tablet-pc {display:table-cell;}
            .farm-A-table > tbody > tr > th.farm-A-pc, .farm-A-table > tbody > tr > td.farm-A-pc {display:table-cell;}
            .farm-A-table.farm-A-row > tbody > tr > th {display:table-cell; text-align:center;}
            .farm-A-table.farm-A-row > tbody > tr > td {display:table-cell;}

            .farm-A-btn-wrap a {margin-left:6px;}
            .farm-A-btn-wrap a:first-child {margin-left:0;}
            .farm-A-btn-wrap .farm-A-half {display:inline-block;}
            .farm-A-btn-wrap .farm-A-half a {float:none; width:auto;}
            .farm-A-btn-wrap .farm-A-half a:first-child {float:none; width:auto;}
            .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle {}
            .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle.farm-A-medium {width:40px;}
            .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle.farm-A-big {width:80px;}

            .farm-A-btn-circle.farm-A-big {display:inline-block; width:80px; height:80px; padding:40px 0; border-radius:50%;}
          
            .farm-A-nowrap {white-space:nowrap;}
        }

     

     

     

    # html

     

            <tbody>
                <tr loop="$myboard_mylist_row as $k => $v">
                    <td class="farm-A-pc">{$v[numbering]}</td>
                    <td>
                        <a href="{$v[read_url]}" class="farm-A-tablet-pc farm-A-atext farm-A-nowrap">{$v[s_v2]}</a>
                        <span class="farm-A-mobile farm-A-align-left" cond="$s_v2_name"><a href="{$v[read_url]}" class="farm-A-atext">{$s_v2_name} : {$v[s_v2]}</a></span>
                        
                        <span class="farm-A-mobile farm-A-align-left" cond="$s_v3_name">{$s_v3_name} : {$v[s_v3]}</span>
                        <span class="farm-A-mobile farm-A-align-left" cond="$s_v4_name">{$s_v4_name} : {$v[s_v4]}</span>
                        <span class="farm-A-mobile farm-A-align-left" cond="$s_t1_name">{$s_t1_name} : {$v[s_t1]}</span>
                        
                    </td>
                    <td class="farm-A-tablet-pc farm-A-nowrap">{$v[s_v1]}</td>
                    <td class="farm-A-tablet-pc farm-A-nowrap">{$v[s_v3]}</td>
                    <td class="farm-A-tablet-pc farm-A-nowrap">{$v[s_v4]}</td>
                                    <td class="farm-A-tablet-pc">{$v[s_t1]}</td>
                    
                </tr>

                <tr cond="!count($myboard_mylist_row)">
                    <td colspan="7" class="farm-A-empty">등록된 데이터가 없습니다.</td>
                </tr>
            </tbody>

댓글작성

열기 닫기

댓글작성
prev 이전글
표스크롤문의
next 다음글
네이버 지도가 아이패드에서 지도가 글자를 덥습니다.
top