반응형
텍스트 영역의 행 및 CSS의 콜 속성
설정하고 싶습니다.textarea의rows그리고.colsCSS를 통한 속성.
CSS에서 어떻게 해야 합니까?
<textarea rows="4" cols="50"></textarea>
이는 다음과 같습니다.
textarea {
height: 4em;
width: 50em;
}
여기서 1em은 현재 글꼴 크기와 동일하므로 텍스트 영역을 50자 너비로 만듭니다.여기를 보세요.
width그리고.heightCSS 경로를 갈 때 사용됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Setting Width and Height on Textareas</title>
<style>
.comments { width: 300px; height: 75px }
</style>
</head>
<body>
<textarea class="comments"></textarea>
</body>
</html>
난 네가 할 수 있다고 생각하지 않아.저는 항상 높이와 너비에 맞춰 갑니다.
textarea{
width:400px;
height:100px;
}
CSS 방식으로 그것을 하는 것의 좋은 점은 당신이 그것을 완전히 스타일링 할 수 있다는 것입니다.이제 다음과 같은 기능을 추가할 수 있습니다.
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
제가 알기로는 안 됩니다.
게다가, 그것은 어쨌든 CSS가 목적이 아닙니다.CSS는 스타일링을 위한 것이고 HTML은 마크업을 위한 것입니다.
행/높이를 설정하기 위해 calc()를 사용하여 데모를 게시하고 싶었습니다. 아무도 게시하지 않았기 때문입니다.
body {
/* page default */
font-size: 15px;
line-height: 1.5;
}
textarea {
/* demo related */
width: 300px;
margin-bottom: 1em;
display: block;
/* rows related */
font-size: inherit;
line-height: inherit;
padding: 3px;
}
textarea.border-box {
box-sizing: border-box;
}
textarea.rows-5 {
/* height: calc(font-size * line-height * rows); */
height: calc(1em * 1.5 * 5);
}
textarea.border-box.rows-5 {
/* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}<p>height is 2 rows by default</p>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>height is 5 now</p>
<textarea class="rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>border-box height is 5 now</p>
<textarea class="border-box rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>패딩에 큰 값(예: 0.5em보다 큰 값)을 사용하면 내용(-box) 영역에 넘치는 텍스트가 표시되기 시작하며, 이 경우 높이가 (설정한) x 행이 아니라 x 행이라고 생각할 수 있습니다.진행 상황을 이해하려면 상자 모델 및 상자 크기 페이지를 확인하십시오.
언급URL : https://stackoverflow.com/questions/2034544/textareas-rows-and-cols-attribute-in-css
반응형
'programing' 카테고리의 다른 글
| PHP에서처럼 JavaScript에서 연중 주간을 얻습니다. (0) | 2023.08.26 |
|---|---|
| MariaDB JDBC 연결 문자열의 여러 마스터 (0) | 2023.08.26 |
| Visual Studio에서 링크로 파일 추가 - 디버그 대 게시 (0) | 2023.08.26 |
| onStart()와 onResume()의 차이 (0) | 2023.08.26 |
| Excel에서 데이터 가져오기 마법사가 데이터 유형을 자동으로 검색합니다. (0) | 2023.08.26 |