블로그 이미지
좋은느낌/원철
이것저것 필요한 것을 모아보렵니다.. 방문해 주셔서 감사합니다..

calendar

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

Notice

    2008. 10. 21. 01:49 Web
    테이블 사이즈 고정시키고 텍스트가 길 경우 라인스킵없이 잘림
     
    <table width=120 border=1 style="table-layout:fixed">
    <tr><td width=120>123456789012345678901234567890</td></tr>
    <tr><td width=120>1234567890</td></tr>
    <tr><td width=120>1234567890</td></tr>
    </table>  




    테이블 사이즈 고정시키고 텍스트가 길 경우 디음라인에 이어 출력



    <table width=120 border=1 style="word-wrap:break-word">
    <tr><td width=120>123456789012345678901234567890</td></tr>
    <tr><td width=120>1234567890</td></tr>
    <tr><td width=120>1234567890</td></tr>
    <tr><td width=120>웹프로그램</td></tr>
    <tr><td width=120>웹프로그램</td></tr>
    </table>
     





    내용이 길경우 들여쓴 텍스트가 자동 줄바굼



    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow-x:hidden;overflow-y:hidden">
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </div>





    내용에 상관없이 사이즈 고정 시키기



    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;word-wrap:break-word; overflow-x:hidden;overflow-y:hidden">
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </div>







    X,Y 스크롤 컨트롤을 보이게 할때는



    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow-x:scroll;overflow-y:scroll">
    1234567890
    웹프로그램
    </div>


    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow-x:scroll;overflow-y:scroll">
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </div>








    문서 길이에 따라 자동으로 X,Y 스크롤 컨트롤을 보이게 할때는


    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow:auto">
    1234567890
    웹프로그램
    </div>


    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow:auto">
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </div>
     





    사이즈 고정시키고 텍스트가 길 경우 라인스킵없이 잘림
    한글의 경우는 라인스킴이되고 영문은 문자열이 잘림
    overflow:hidden;text-overflow:ellipsis



    <p STYLE="width:120;overflow:hidden;text-overflow:ellipsis">123456789012345678901234567890</p>
    <p STYLE="width:120;overflow:hidden;text-overflow:ellipsis">
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </p>








    글 길이가 길 때 말줄임표, 문자열을 고정시켜 문자열 자르는 효과를 준다.
    overflow:hidden;text-overflow:ellipsis 과 NOBR 같이 사용 또는

    <div STYLE="width:120;overflow:hidden;text-overflow:ellipsis"><NOBR>1.가나다라마바사아자차카타파하</NOBR></div>

    overflow:hidden;text-overflow:ellipsis;white-space:nowrap



    <div STYLE="width:120;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">2.가나다라마바사아자차카타파하</div>

    posted by 좋은느낌/원철