[css] CSS의 textarea의 행 및 cols 속성

Program / 글쓴이

CSS를 통해 textarea의 rows및 cols속성 을 설정하고 싶습니다 .

CSS에서 어떻게해야합니까?

답변

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 rows="4" cols="50"></textarea>

다음과 같습니다.

textarea {
    height: 4em;
    width: 50em;
}

여기서 1em은 현재 글꼴 크기와 동일하므로 텍스트 영역을 50 자 너비로 만듭니다.
여기를 참조하십시오 .

답변

나는 당신이 할 수 있다고 생각하지 않습니다. 나는 항상 높이와 너비로 간다.

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 이상)을 사용하면 content (-box) 영역을 오버플로하는 텍스트가 나타나기 시작하여 높이가 정확히 x 행이 아니라고 생각할 수 있습니다 ( 당신이 설정)하지만, 그것은입니다. 무슨 일이 일어나고 있는지 이해하려면 상자 모델 및 상자 크기 페이지 를 확인하십시오 .

답변