CSS 오버플로 속성-CSS 튜토리얼-php.cn

CSS 오버플로 속성

高洛峰

풀어 주다： 2016-11-24 10:09:19

원래의

1605명이 탐색했습니다.

정의 및 사용법
overflow 속성은 콘텐츠가 요소 상자를 넘칠 때 발생하는 상황을 지정합니다.
설명
이 속성은 요소의 콘텐츠 영역을 벗어나는 콘텐츠를 처리하는 방법을 정의합니다. 값이 스크롤이면 사용자 에이전트는 필요 여부에 관계없이 스크롤 메커니즘을 제공합니다. 따라서 모든 항목이 요소 상자 안에 들어가더라도 스크롤 막대가 나타날 수 있습니다.

오버플로 속성 값:
1.visible: 기본값. 콘텐츠는 잘리지 않고 요소 상자 외부에 렌더링됩니다.
2.hidden: 내용이 잘리고 나머지 내용은 보이지 않습니다.
3.scroll: 콘텐츠가 잘리지만 나머지 콘텐츠를 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다.
4.auto: 콘텐츠가 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 콘텐츠를 볼 수 있습니다.
5.inherit: 오버플로 속성의 값이 상위 요소에서 상속되도록 지정합니다.
요약: 오버플로 속성 값에서 visible과 hide는 반대이고, scroll과 auto는 반대입니다. 상속은 상위 요소의 오버플로 속성 값을 상속하는 것입니다. 기본값은 스크롤입니다.

시나리오: 텍스트 상자는 의견을 표현하는 데 사용되며 콘텐츠가 지정된 표시 공간을 넘을 때 스크롤 막대가 표시되지 않습니다. , 더 이상 텍스트를 입력할 수 없습니다.
코드:

Html代码 
<table border=1 cellspacing=0 cellpadding=0> 
    <tr> 
        <td colspan="4" align="left" height="40px" 
            style="FONT-FAMILY: 宋体; FONT-SIZE: 12pt;"> 
 
            <table border=0 cellspacing=0 cellpadding=0 width=100%> 
                <tr> 
                    <td colspan=2> 
                        审计单位意见: 
                    </td> 
                </tr> 
                <tr> 
                    <td colspan=2> 
                        <textarea rows="8" cols="120" style="overflow: hidden"></textarea> 
                    </td> 
                </tr> 
                <tr> 
                    <td width="44%"> 
                          
                    </td> 
                    <td style="padding-left: 100px;"> 
                        <input type="text" size="8" maxsize="4" align="center" 
                            style="border: none;"> 
                        年 
                        <input type="text" size="4" maxsize="2" align="center" 
                            style="border: none;"> 
                        月 
                        <input type="text" size="4" maxsize="2" align="center" 
                            style="border: none;"> 
                        日 
                    </td> 
                </tr> 
            </table> 
        </td> 
    </tr> 
    </tr> 
    <tr> 
        <td colspan="4" align="left" height="40px" 
            style="FONT-FAMILY: 宋体; FONT-SIZE: 12pt;"> 
            <table border=0> 
                <tr> 
                    <td> 
                        发包人意见: 
                    </td> 
                </tr> 
                <tr> 
                    <td colspan=2> 
                        <textarea rows="8" cols="120" style="overflow: hidden;"></textarea> 
                    </td> 
                </tr> 
                <tr> 
                    <td width="44%"> 
                          
                    </td> 
                    <td style="padding-left: 100px;"> 
                        <input type="text" size="8" maxsize="4" align="center" 
                            style="border: none;"> 
                        年 
                        <input type="text" size="4" maxsize="2" align="center" 
                            style="border: none"> 
                        月 
                        <input type="text" size="4" maxsize="2" align="center" 
                            style="border: none"> 
                        日 
                    </td> 
                </tr> 
            </table> 
        </td> 
    </tr> 
</table>

로그인 후 복사