투케이2K

80. (html/css/javascript/jquery) p 태그 텍스트 글자 수가 부모 div 영역 초과 시 overflow 스크롤 처리 실시 본문

FrontEnd

80. (html/css/javascript/jquery) p 태그 텍스트 글자 수가 부모 div 영역 초과 시 overflow 스크롤 처리 실시

투케이2K 2021. 8. 23. 17:58
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

[소스코드]

​

<body>

<!-- 
[div 태그 주요 스타일]
1. display: block; : div 내에 포함된 자식 p 태그 텍스트 길이가 부모 div 영역 초과 시 overflow 적용을 위함
2. overflow: auto; : div 영역 내 크기를 벗어날 경우 auto (스크롤) 처리 설정
3. 참고 : p 태그를 포함하고 있는 div 영역 display 스타일 속성 값을 block 으로 설정해야 정상적으로 텍스트 초과 시 오버플로우 처리가됩니다 
-->


<!-- 
[p 태그 주요 스타일]
1. display: table-cell; : 자식 영역을 테이블 셀 속성으로 설정합니다 (텍스트 overflow 처리에서 상단에 텍스트를 표시해줍니다)
2. text-align: left; : 수평 (가로) 방향 기준으로 왼쪽으로 정렬을 실시합니다
3. text-align: right; : 수평 (가로) 방향 기준으로 오른쪽으로 정렬을 실시합니다
4. text-align: center; 수평 (가로) 방향 기준으로 중앙으로 정렬을 실시합니다
5. text-align: justify; : 수평 (가로) 방향 문단 기준으로 좌우 맞춤 정렬을 실시합니다
-->


<div style="width: 70%; height : 10%; margin: 0 auto; padding: 0; border: 1px solid #000;
        float: top; position: relative; top: 2%; left: 0%; 
        display: block; overflow: auto;">

    <p style="display: table-cell; text-align: justify; padding-left: 10px; 
            color: #000; font-size: 15px; font-weight: bold;">
    <span style="color: #0000ff;">[div : height:10%;  display: block;  overflow: auto;]</span><br>
    <span style="color: #ff0000;">[p : display: table-cell;]</span><br>
    부모 div 스타일 height 지정 및 display block 설정, overflow 길이 초과 auto 처리 실시<br>
    자식 p 태그 스타일 display: table-cell; 처리 실시<br>    
    </p>
            
</div>

</body>

[결과 출력]

​

[요약 설명]

​

<!--

[div 태그 주요 스타일]

1. display: block; : div 내에 포함된 자식 p 태그 텍스트 길이가 부모 div 영역 초과 시 overflow 적용을 위함

2. overflow: auto; : div 영역 내 크기를 벗어날 경우 auto (스크롤) 처리 설정

3. 참고 : p 태그를 포함하고 있는 div 영역 display 스타일 속성 값을 block 으로 설정해야 정상적으로 텍스트 초과 시 오버플로우 처리가됩니다

-->

​

​

<!--

[p 태그 주요 스타일]

1. display: table-cell; : 자식 영역을 테이블 셀 속성으로 설정합니다 (텍스트 overflow 처리에서 상단에 텍스트를 표시해줍니다)

2. text-align: left; : 수평 (가로) 방향 기준으로 왼쪽으로 정렬을 실시합니다

3. text-align: right; : 수평 (가로) 방향 기준으로 오른쪽으로 정렬을 실시합니다

4. text-align: center; 수평 (가로) 방향 기준으로 중앙으로 정렬을 실시합니다

5. text-align: justify; : 수평 (가로) 방향 문단 기준으로 좌우 맞춤 정렬을 실시합니다

-->

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

82. (html/css/javascript/jquery) text-shadow 사용해 텍스트 글자 그림자 효과 적용 실시  (0) 2021.08.26
81. (html/css/javascript/jquery) p 태그 letter-spacing 사용해 텍스트 글자 자간 (가로 간격) 조절 실시  (0) 2021.08.25
79. (html/css/javascript/jquery) p 태그 텍스트 글자 수에 맞춰서 div height 높이 자동 조절 실시  (0) 2021.08.21
78. (html/css/javascript/jquery) p 태그 vertical-align 텍스트 세로 정렬 수행 실시 - table , top , middle , bottom  (0) 2021.08.20
77. (html/css/javascript/jquery) p 태그 텍스트 수직 line-height 줄 간격 조절 및 padding-left 들여쓰기 수행 실시  (0) 2021.08.19
'FrontEnd' Related Articles more
Comments