포함 된 새 양식을 개발할 때마다 textarea치수를 지정해야 할 때 다음과 같은 딜레마가 발생합니다.

CSS를 사용 하거나 textarea의 속성 cols과 rows?

각 방법의 장단점은 무엇입니까?

이러한 속성을 사용하는 의미는 무엇입니까?

보통 어떻게됩니까?

둘 다 사용하는 것이 좋습니다. 클라이언트가 CSS를 지원하지 않는 경우 행과 열이 필요하고 유용합니다. 그러나 디자이너로서 나는 내가 원하는 크기를 정확히 얻도록 덮어 씁니다.

권장되는 방법은 외부 스타일 시트를 통하는 것입니다. 예 :

textarea {
  width: 300px;
  height: 150px;
}

<textarea> </textarea>

textarea { height: auto; }

<textarea rows="10"></textarea>

이렇게하면 브라우저가 텍스트 영역의 높이를 행 수와 그 주변의 패딩으로 정확하게 설정하도록 트리거합니다. CSS 높이를 정확한 픽셀 수로 설정하면 임의의 공백이 남습니다.

w3c에 따르면 cols와 rows는 모두 textareas의 필수 속성입니다. 행과 열은 픽셀이나 잠재적으로 임의의 다른 값이 아닌 텍스트 영역에 들어갈 문자 수입니다. 행 / 콜로 이동하십시오.

대답은 "예"입니다. 즉, 둘 다 사용해야합니다. 행과 열이 없으면 (그리고 명시 적으로 사용하지 않더라도 기본값이 있음) CSS가 비활성화되거나 사용자 스타일 시트에 의해 재정의되는 경우 텍스트 영역이 사용할 수 없을 정도로 작습니다. 접근성 문제를 항상 염두에 두십시오. 그 존재는 스타일 시트가 텍스트 영역의 모양을 제어 할 수있는 경우, 당신은 일반적으로 잘 전체 페이지 디자인에 훨씬 좋아 보이는 뭔가 맞는와 바람 것, 말했다 및 (즉, 사용자 입력을 유지하기 위해 크기를 조정할 수 있습니다 물론 좋은 맛의 한계 내에서).

텍스트 영역의 경우 CSS 아래에서 크기를 수정할 수 있습니다.

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

angularjs 및 angular7에서 테스트

 <textarea style="width:300px; height:150px;" ></textarea>

텍스트 영역의 크기는 cols 및 rows 속성으로 지정하거나 더 좋게 지정할 수 있습니다. CSS의 높이 및 너비 속성을 통해 cols 속성은 모든 주요 브라우저에서 지원됩니다. 한 가지 주요 차이점은 <TEXTAREA ...>컨테이너 태그입니다. 시작 태그 ()가 있습니다.

나는 보통을 지정하지 않지만 and 및을 height지정 합니다.width: ...rowscols

일반적으로, 내 경우 만 width하고 rows다른 elems에 베풀어 관련 봐 좋은에 텍스트 영역을 위해 필요하다. (그리고 cols다른 답변에서 설명한 것처럼 누군가 CSS를 사용하지 않으면 대체됩니다.)

((두 가지를 모두 지정 rows하고 height중복 데이터와 같은 느낌이 들까 요?))

텍스트 영역의 주요 특징은 확장 가능하다는 것입니다. 웹 페이지에서 텍스트 길이가 설정 한 공간을 초과하는 경우 (행을 사용하거나 CSS를 사용하는 경우) 스크롤 막대가 텍스트 영역에 나타날 수 있습니다. 'printing'to PDF-조건부 CSS 규칙을 사용하여 인쇄 된 텍스트 영역에 대해 편안하게 큰 최소 높이를 설정하십시오.

@media print { 
textarea {
min-height: 900px;  
}
}

매번 사용하지 않으면 줄 높이를 사용하십시오. '..'; 속성은 텍스트 영역의 높이와 텍스트 영역의 너비에 대한 너비 속성을 제어합니다.

또는 다음 CSS로 글꼴 크기를 사용할 수 있습니다.

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}

HTML 행과 열이 반응하지 않습니다!

CSS에서 크기를 정의합니다. 팁 : 휴대 전화에 작은 크기를 정의하면textarea:focus {};

여기에 여분의 공간을 추가하십시오. 사용자가 실제로 무언가를 작성하려는 순간 만 전개됩니다.

CSS

input
{
    width: 300px;
    height: 40px;
} 

HTML

<textarea rows="4" cols="50">HELLO</textarea>