คุณลักษณะแถวของ textarea และ cols ใน CSS

155

ฉันต้องการที่จะตั้งค่าtextarea's rowsและcolsแอตทริบิวต์ผ่านทาง CSS

ฉันจะทำสิ่งนี้ใน CSS ได้อย่างไร

css styling

— ASD
แหล่งที่มา

เมื่อใดที่จะใช้คำถามใด: stackoverflow.com/questions/3896537/ …

— Ciro Santilli 郝海东冠状病病六四事件法轮功

106

widthและheightจะถูกใช้เมื่อไปตามเส้นทาง css

<!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

ตามคำตอบของผู้ใช้ 2928048 ด้านล่างหากคุณใช้ "em" แทน "px" คุณสามารถระบุความกว้างและความสูงเป็นตัวอักษรได้ตามที่คุณต้องการด้วยแอตทริบิวต์ 'row' และ 'cols' แม้แต่ทำงานร่วมกับ IE6 ฉันเชื่อว่า

— Swanny

1

ในขณะที่ฉันเห็นด้วยกับการใช้emสำหรับการระบุความสูงฉันสงสัยว่ามันสามารถใช้เพื่อระบุความกว้าง มันอาจทำงานกับแบบอักษร monospace (หลังจากหาอัตราส่วนความกว้าง: ความสูงของตัวละครและแก้ไขค่าความกว้างตามลำดับ) และนั่นคือมัน ยกเว้นความกว้างและความกว้างของตัวละครไม่ได้รับการแก้ไขดังนั้นฉันไม่คิดว่าจะมีคุณลักษณะemหรือcolsความช่วยเหลือเมื่อระบุความกว้าง

— akinuri

ฉันอาจจะผิด แต่ px ไม่ได้ผลสำหรับฉัน พวกเขาทำ

— Jesse Steele

311

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

มันเทียบเท่ากับ:

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

โดยที่ 1em เทียบเท่ากับขนาดแบบอักษรปัจจุบันทำให้พื้นที่ข้อความกว้าง 50 ตัวอักษร ดูที่นี่

— user2928048
แหล่งที่มา

40

เพื่อให้แน่นอนยิ่งขึ้นคุณต้องคำนึงถึงpaddingและline-heightพิจารณาบัญชีด้วย สมมติว่าคุณมีช่องว่างครึ่ง em ที่ด้านบนและที่ด้านล่างและบรรทัดความสูง 1.2em จากนั้นความสูงสำหรับ 4 แถวจะเป็น 1 + 4 * 1.2 = 5.8em

— n

2

@ เกือบโซลูชั่นของคุณถูกต้อง ปัญหาคือ 4em = 4 x ขนาดตัวอักษรซึ่งไม่มีปัจจัยการขยายหรือความสูงบรรทัด

— Nicholas

3

หากคุณมีการปรับขนาดกล่องคุณสมบัติ: content-box คุณจะไม่ต้องกังวลเกี่ยวกับการเติมดังนั้นคุณจึงยังคงมี แต่ความสูงของเส้นเท่านั้น

— mikewasmike

2

ดี @ ชัดขอบคุณสำหรับวิธีการ การเพิ่มคำตอบของคุณเล็กน้อยฟังก์ชัน Calc () CSS3 สามารถลดความกว้าง / ความสูงของการคำนวณได้: พูดว่าฉันมี textarea พร้อม padding-top และ padding-bottom 4px และฉันต้องการให้สูง 3 แถวความสูงน่าจะเป็นheight: calc(3em + 8px);.

— GBU

ในขณะที่rowsคุณลักษณะมีความน่าเชื่อถือ (ค่อนข้าง) ฉันจะไม่พึ่งพาcolsคุณลักษณะเว้นแต่ฉันจะใช้แบบอักษร monospace บน textarea ดู @ 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 ใช้สำหรับมาร์กอัป

— Moulde
แหล่งที่มา

1

CSS ใช้สำหรับจัดแต่งทรงผมที่แสดงองค์ประกอบของภาพ ซึ่งรวมถึงความกว้างและความสูงของ textarea

— 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) คุณจะเริ่มเห็นข้อความที่ล้นพื้นที่ (-box) เนื้อหาและอาจทำให้คุณคิดว่าความสูงนั้นไม่ตรงแถว x ( ที่คุณตั้งไว้) แต่มันเป็น เพื่อให้เข้าใจถึงสิ่งที่เกิดขึ้นคุณอาจต้องการตรวจสอบรูปแบบ กล่องและหน้าการปรับขนาดกล่อง

— akinuri
แหล่งที่มา