CSS의 textarea의 행 및 cols 속성

154

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

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

css  styling 
— ASD
소스
언제 어떤 질문을 사용해야
— 합니까

답변:

107

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>
— 샘슨
소스
12
아래의 user2928048의 답변에 따라 "px"대신 "em"을 사용하는 경우 'rows'및 'cols'속성과 마찬가지로 문자의 너비와 높이를 지정할 수 있습니다. 내가 믿는 IE6에서도 작동합니다.
— Swanny
em높이 지정에 사용하는 것에 동의하지만 너비를 지정하는 데 사용할 수 있는지 의심됩니다. 그것은 수 (폭 파악 후 : 문자의 높이 비율 및 대응 폭 값을 수정) 고정 폭 글꼴로 작업하고, 바로 그거야. 내가 생각하지 않도록 모노 스페이스를 제외하고, 문자 폭은 고정되어 있지 em또는 cols폭을 지정할 때 속성이 도움이 될 수 있습니다.
— akinuri
나는 틀렸을지도 모르지만 px는 나를 위해 작동하지 않았다. 그랬어.
— 제시 스틸
309 
<textarea rows="4" cols="50"></textarea>

다음과 같습니다.

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

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

— 사용자 2928048
소스
39
더 정확하게하려면 수행해야 padding하고 line-height계정에서. 맨 위와 맨 아래에 반 em의 패딩과 1.2em의 행 높이가 있다고 가정하면 4 행의 높이는 1 + 4 * 1.2 = 5.8em입니다.
— nalply
2
@ nalply 솔루션이 정확합니다. 문제는 4em = 4 x 글꼴 크기로 패딩이나 줄 높이를 고려하지 않습니다.
— Nicholas
3
box-sizing 속성이있는 경우 : content-box; 패딩에 대해 걱정할 필요가 없으므로 선 높이 만 유지하십시오.
— mikewasmike
2
좋은 @nalply, 접근 주셔서 감사합니다. 귀하의 답변에 약간을 추가하면 calc () CSS3 함수는 너비 / 높이 계산을 용이하게 할 수 있습니다. 패딩 탑과 패딩 탑이 4px 인 텍스트 영역이 있고 높이가 3 행 이길 원한다고 가정하십시오. height: calc(3em + 8px);.
— GBU
하지만 rows속성이 (다소) 신뢰할 수있다, 나는에 의존하지 않을 cols나는 텍스트 영역에 고정 폭 글꼴을 사용하고 있습니다하지 않는 속성. @AlexanderScholz 의 업데이트 된 바이올린을 참조하십시오 .
— akinuri
16

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

textarea{
width:400px;
height:100px;
}

CSS 방식으로 할 때 좋은 점은 완전히 스타일을 지정할 수 있다는 것입니다. 이제 다음과 같은 것을 추가 할 수 있습니다.

textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
— 코드 원숭이
소스
4

내가 아는 한, 당신은 할 수 없습니다.

게다가 CSS가 어쨌든 아닙니다. CSS는 스타일링을위한 것이고 HTML은 마크 업을위한 것입니다.

— 곰팡이
소스
1
CSS는 요소의 시각적 표현을 스타일링하기위한 것입니다. 여기에는 텍스트 영역의 너비와 높이가 포함됩니다.
— Sampson
그들이 동일하지 않은 브라우저 포함한 각 행에 고려 문자의 높이를 얻어 line-height, padding용기 (에 기초하여 높이를 산출하는하지에 box-sizing심지어 텍스트 상자 디스플레이를 설정 번호를 확인하는 데 사용되는 폰트의 계정에 서로 다른 종횡비를 복용) CSS 높이를 사용하여 달성 할 수없는 텍스트 행.
— William Isted
0

아무도 행 / 높이를 설정하기 위해 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 행이 아니라고 생각할 수 있습니다 ( 당신이 설정)하지만, 그것은입니다. 무슨 일이 일어나고 있는지 이해하려면 상자 모델 및 상자 크기 페이지 를 확인하십시오 .

— 아키 누리
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.