textarea की पंक्तियाँ, और CSS में cols विशेषता

154

मैं निर्धारित करना चाहते हैं textareaकी rowsऔर colsसीएसएस के माध्यम से गुण।

मैं CSS में यह कैसे करूंगा?

css styling

— एएसडी
स्रोत

कब किस प्रश्न का उपयोग करें: stackoverflow.com/questions/3896537/…

— Ciro Santilli 病 question question question

106

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" का उपयोग करते हैं तो आप वर्णों में चौड़ाई और ऊंचाई निर्दिष्ट कर सकते हैं जैसा कि आप 'पंक्तियों' और 'cols' विशेषताओं के साथ करेंगे। यहां तक कि IE6 के साथ काम करता है मुझे विश्वास है।

— स्वान

हालांकि मैं emऊंचाई को निर्दिष्ट करने के लिए उपयोग करने से सहमत हूं , मुझे संदेह है कि इसका उपयोग चौड़ाई को निर्दिष्ट करने के लिए किया जा सकता है। यह मोनोस्पेस फॉन्ट के साथ काम कर सकता है (चौड़ाई का पता लगाने के बाद: वर्णों की ऊंचाई अनुपात और चौड़ाई मान को समान रूप से संशोधित करता है), और यही वह है। Monospace छोड़कर, चरित्र चौड़ाई तय नहीं हैं, इसलिए मुझे नहीं लगता कि emया colsविशेषता जब चौड़ाई को निर्दिष्ट कर सकते हैं।

— akinuri

मैं गलत हो सकता हूं, लेकिन px ने मेरे लिए काम नहीं किया; उन्हें किया

— जेसी स्टील

310

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

यह इसके बराबर है:

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

जहां 1em वर्तमान फ़ॉन्ट आकार के बराबर है, इस प्रकार पाठ क्षेत्र को 50 वर्ण चौड़ा करें। यहाँ देखें ।

— user2928048
स्रोत

39

अधिक सटीक होने के लिए, आपको लेने की जरूरत है paddingऔर line-heightखाते में। मान लें कि आपके पास शीर्ष और तल पर आधा em का एक पैडिंग है और 1.2em की एक पंक्ति-ऊंचाई है, तो 4 पंक्तियों के लिए ऊंचाई 1 + 4 * 1.2 = 5.8em होगी।

— नागवार

2

@ वैधानिक रूप से आपका समाधान सही है। समस्या 4em = 4 x फ़ॉन्ट-आकार की है, जिसमें न तो पैडिंग के कारक हैं और न ही लाइन-ऊँचाई

— निकोलस

3

यदि आपके पास प्रॉपर्टी बॉक्स-साइज़िंग है: सामग्री-बॉक्स; आपको पैडिंग के बारे में चिंता करने की आवश्यकता नहीं होगी, इसलिए आप केवल लाइन की ऊंचाई के साथ बने रहेंगे।

— mikewasmike

2

अच्छा @ हंसमुख, दृष्टिकोण के लिए धन्यवाद। अपने उत्तर में थोड़ा जोड़कर, कैल्क () CSS3 फ़ंक्शन चौड़ाई / ऊंचाई की गणना को कम कर सकता है: कहो कि मेरे पास पैडिंग-टॉप और पैडिंग-बॉटम 4px के साथ एक टेक्स्टरी है, और मैं चाहता हूं कि यह 3 पंक्तियों से ऊंचा हो, ऊंचाई होगी height: calc(3em + 8px);।

— जीबीयू

जब तक rowsविशेषता (कुछ हद तक) विश्वसनीय है, मैं colsविशेषता पर भरोसा नहीं करूंगा जब तक कि मैं textarea पर मोनोस्पेस फॉन्ट का उपयोग नहीं कर रहा हूं। देखिए @ AlexanderScholz की अपडेटेड फील ।

— akinuri

16

मुझे नहीं लगता कि आप कर सकते हैं। मैं हमेशा ऊंचाई और चौड़ाई के साथ जाता हूं।

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

इसे सीएसएस तरीके से करने के बारे में अच्छी बात यह है कि आप इसे पूरी तरह से स्टाइल कर सकते हैं। अब आप चीजों को जोड़ सकते हैं:

textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}

— कोड बंदर
स्रोत

4

जहाँ तक मुझे पता है, तुम नहीं कर सकते।

इसके अलावा, कि सीएसएस वैसे भी क्या है। CSS स्टाइल के लिए है और HTML मार्कअप के लिए है।

— Moulde
स्रोत

1

CSS एक तत्व के दृश्य प्रतिनिधित्व को स्टाइल करने के लिए है। इसमें एक बनावट की चौड़ाई और ऊंचाई शामिल है।

— सैम्पसन

वे समान नहीं हैं, ब्राउज़र कंटेनर पर प्रत्येक पंक्ति पर पाठ की ऊंचाई को ध्यान में रखता है line-height, paddingकंटेनर पर (ऊंचाई के आधार पर गणना नहीं करता है box-sizing), यहां तक कि पाठ बॉक्स के अलग-अलग पहलू अनुपात को ध्यान में रखते हुए, यह सुनिश्चित करने के लिए उपयोग किया जाता है कि पाठ बॉक्स सेट संख्या प्रदर्शित करता है पाठ की पंक्तियाँ जो आप css ऊँचाई का उपयोग करके प्राप्त नहीं कर सकते हैं।

— विलियम आइस्टेड

0

मैं बस पंक्तियों / ऊंचाई की स्थापना के लिए कैल्क () का उपयोग करके एक डेमो पोस्ट करना चाहता था , क्योंकि कोई भी नहीं करता था।

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 से अधिक), तो आप उस पाठ को देखना शुरू कर देंगे, जो सामग्री (-बॉक्स) क्षेत्र को ओवरफ्लो करता है, और हो सकता है कि आपको लगे कि ऊंचाई बिल्कुल x पंक्तियाँ नहीं है ( कि आप सेट), लेकिन यह है। यह समझने के लिए कि आप क्या कर रहे हैं, आप बॉक्स मॉडल और बॉक्स-साइज़िंग पृष्ठों की जाँच कर सकते हैं ।

— akinuri
स्रोत