CSS의 새로운 속성 필드 크기 조정을 통해 입력, 텍스트 영역 및 선택 항목을 콘텐츠에 맞게 조정할 수 있습니다.

필드 크기 조정 소개

field-sizing은 입력, 텍스트 영역 및 선택 항목이 콘텐츠 크기에 맞게 자동으로 조정되도록 하는 새로운 CSS 속성입니다.

• 고정 - 입력, 텍스트 영역 및 선택 항목의 현재 동작으로, 내용에 관계없이 크기가 고정되어 있습니다.
• content , 양식 요소가 콘텐츠 크기에 맞게 조정됩니다.

입력 또는 선택에 적용하면 콘텐츠 너비에 맞게 크기가 조정됩니다. 텍스트 영역에 적용하면 콘텐츠 높이에 맞게 크기가 조정됩니다.

예

<input
  type="text"
  placeholder="input"
  value="this sizes to its content"
/>

<style>input {
  field-sizing: content;
}
</style>

<textarea>
Here is a
Multiline
Textarea
</textarea>


<style>
 textarea {
  field-sizing: content;
  width: 200px;
}
</style>

주의할 점

• CSS 기본 사용자 인터페이스 모듈 레벨 4의 일부이며 아직 편집기 초안 상태(변경될 수 있고 변경될 것임을 의미)에 있으며 현재 Chromium 전용 기능입니다. 그러나 올해 어느 시점에는 다른 브라우저에도 적용될 것으로 예상되며 Safari는 이미 긍정적인 신호를 보냈으며 Firefox도 이를 따를 가능성이 높습니다.
• 브라우저 지원이 부족하다는 점 외에도 입력, 선택 또는 텍스트 영역에 경계가 있는지 확인해야 합니다. 그렇지 않으면 계속해서 성장할 것입니다.
요소에 최대 너비 또는 최대 높이를 설정하면 됩니다.
• 마찬가지로 공백이나 포인트 너비로 축소되는 것을 원하지 않으면 입력 및 선택 항목에 최소 너비를 추가하세요.

위 내용은 CSS의 새로운 속성 필드 크기 조정을 통해 입력, 텍스트 영역 및 선택 항목을 콘텐츠에 맞게 조정할 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!