উত্তর:
widthএবং heightসিএসএস রুটে যাওয়ার সময় ব্যবহৃত হয়।
<!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>emউচ্চতা নির্দিষ্ট করার জন্য ব্যবহারের সাথে একমত হই , তবে আমি সন্দেহ করি যে এটির প্রস্থটি নির্দিষ্ট করতে ব্যবহার করা যেতে পারে। এটি মনোস্পেস ফন্টগুলির সাথে কাজ করতে পারে (প্রস্থটি নির্ধারণের পরে: অক্ষরের উচ্চতা অনুপাত এবং প্রস্থের মান যথাযথভাবে সংশোধন করার পরে) এবং এটিই। মনোস্পেস ব্যতীত, অক্ষরের প্রস্থগুলি স্থির থাকে না, সুতরাং প্রস্থটি নির্দিষ্ট করার সময় আমি ভাবি না emবা colsগুণাবলী সাহায্য করতে পারে।
<textarea rows="4" cols="50"></textarea>এটি সমান:
textarea {
height: 4em;
width: 50em;
}যেখানে 1 এম বর্তমান ফন্টের আকারের সমান, সুতরাং পাঠ্য অঞ্চলটি 50 টি চওড়া প্রশস্ত করুন। এখানে দেখুন ।
paddingএবং line-heightঅ্যাকাউন্টে নেওয়া দরকার । বলুন যে আপনার উপরে এবং নীচে অর্ধেক এমের একটি প্যাডিং রয়েছে এবং 1.2 মিটারের একটি লাইন-উচ্চতা রয়েছে, তবে 4 সারির উচ্চতা হবে 1 + 4 * 1.2 = 5.8 ম।
height: calc(3em + 8px);।
rowsঅ্যাট্রিবিউট (কিছুটা) নির্ভরযোগ্য, আমি উপর নির্ভর করবে না colsযদি না আমি পাঠ্য এলাকা উপর মোনোস্পেস ফন্ট ব্যবহার করছি অ্যাট্রিবিউট। @ আলেকজান্ডার শোল্জের আপডেট হওয়া ফিডল দেখুন ।
আমি মনে করি না আপনি পারবেন। আমি সর্বদা উচ্চতা এবং প্রস্থ সঙ্গে যেতে।
textarea{
width:400px;
height:100px;
}এটি সিএসএস উপায়ে করার বিষয়ে দুর্দান্ত জিনিসটি হ'ল আপনি এটি সম্পূর্ণরূপে স্টাইল আপ করতে পারেন। এখন আপনি এই জাতীয় জিনিস যুক্ত করতে পারেন:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}আমি যতদূর জানি, আপনি পারবেন না।
তদ্ব্যতীত, যাইহোক যাইহোক সিএসএস কি তা নয়। সিএসএস স্টাইলিংয়ের জন্য এবং এইচটিএমএল মার্কআপের জন্য।
line-height, paddingধারক (উপর ভিত্তি করে একটি উচ্চতা গণক না হয়ে box-sizing), এমনকি পাঠ্যবাক্স প্রদর্শন সেট সংখ্যা নিশ্চিত করতে ব্যবহৃত ফন্ট একাউন্টে বিভিন্ন অ্যাসপেক্ট রেশিও গ্রহণ সারি সারণির পাঠ্য যা আপনি CSS উচ্চতা ব্যবহার করে অর্জন করতে পারবেন না।
আমি সারি / উচ্চতা নির্ধারণের জন্য ক্যালক () ব্যবহার করে একটি ডেমো পোস্ট করতে চেয়েছিলাম , যেহেতু কেউ করেনি।
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.5 মিটারের বেশি), আপনি পাঠ্যটি দেখতে শুরু করতে পারেন যা সামগ্রী (-box) অঞ্চলকে উপচে ফেলেছে এবং এটি আপনাকে ভাবতে পরিচালিত করতে পারে যে উচ্চতা হুবহু x সারি নয় ( যে আপনি সেট করেছেন), কিন্তু এটি। কী চলছে তা বোঝার জন্য, আপনি বক্স মডেল এবং বক্স-আকারের পৃষ্ঠাগুলি পরীক্ষা করে দেখতে চাইতে পারেন ।