मैं मूलपाठ को उसके मूल DIV तत्व से आगे बढ़ाने से कैसे रोक सकता हूं? (केवल Google क्रोम मुद्दा)

Question

मैं मूलपाठ को उसके मूल DIV तत्व से आगे बढ़ने से कैसे रोक सकता हूं?

मेरे पास यह टेबेरिया एक टेबल के अंदर है जो एक डीआईवी के अंदर है और ऐसा लगता है कि यह पूरी मेज को अपनी सीमा से बाहर खींचता है।

आप एक ही स्थिति का एक और भी सरल मामले में उदाहरण देख सकते हैं, बस एक div के अंदर एक पाठ क्षेत्र डालते हैं (जैसे www.stackoverflow.com में यहाँ क्या उपयोग किया गया है)

आप नीचे दिए गए चित्रों से देख सकते हैं कि टेक्स्टारिया अपने माता-पिता के आकार से आगे बढ़ सकता है? मैं इसे कैसे न होने दूँ?

मैं CSS के लिए नया हूँ इसलिए मुझे वास्तव में नहीं पता है कि CSS विशेषताओं का मुझे क्या उपयोग करना चाहिए। मैंने प्रदर्शन , और अतिप्रवाह जैसे कई प्रयास किए । लेकिन वे ऐसा नहीं करते हैं। मुझे और कुछ याद हो सकता है?

अद्यतन: HTML

सीएसएस

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} ​

यदि आप इस कोड को http://jsfiddle.net के अंदर रखते हैं , तो आप देखेंगे कि वे अलग तरह से कार्य करते हैं। हालाँकि, टेक्स्टारिया अपनी सीएसएस शैली में घोषित प्रतिशत तक सीमित है, फिर भी इसे प्राप्त करना संभव है, क्योंकि इसकी मूल तालिका जितनी बड़ी होनी चाहिए, उतनी बड़ी है और फिर आप देख सकते हैं कि यह अपनी मूल सीमा पर फैलती है। इसे ठीक करने के बारे में कोई विचार?

Comments

@ माकोतो - वह दिनांक देखें जहां यह प्रश्न पोस्ट किया गया है।

— इटा लेविन

Answer 1

पूरी तरह से आकार बदलने को अक्षम करने के लिए:

textarea {
    resize: none;
}

केवल ऊर्ध्वाधर आकार बदलने की अनुमति देने के लिए:

textarea {
    resize: vertical;
}

केवल क्षैतिज आकार बदलने की अनुमति देने के लिए:

textarea {
    resize: horizontal;
}

या आप आकार को सीमित कर सकते हैं:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

माता-पिता की चौड़ाई और / या ऊंचाई के आकार को सीमित करने के लिए:

textarea {
    max-width: 100%; 
    max-height: 100%;
}

Comments

क्या मैं अभी भी मैनुअल स्ट्रेचिंग उपलब्ध रख सकता हूं, स्ट्रेचिंग स्ट्रेच की सीमा केवल मूल तत्व की सीमा में है?

— इटा लेविन

यह एक सीएसएस विशेषता है? यह css 2.1 में मान्य नहीं है

— Itay Levin

हाँ, यह CSS विशेषता है लेकिन यह मान्य नहीं होगी। मैंने भी अपना जवाब अपडेट कर दिया।

— मॉरिस किसेवोस

मुझे आश्चर्य है कि ifi इसे एक चौड़ाई के रूप में काम कर सकता है और एक निश्चित संख्या में पिक्सेल नहीं। क्योंकि मैं उपयोगकर्ता को पाठ क्षेत्र का आकार बदलने की अनुमति देना चाहता हूं लेकिन स्क्रीन संरचना को नहीं तोड़ना चाहता।

— इटा लेविन

प्रतिशत के रूप में अधिकतम-चौड़ाई सेट करना अच्छी तरह से काम करता है - jsfiddle.net/paGE3 । वैसे, अगर यह काम कर रहा है तो कृपया मेरे उत्तर को स्वीकार करें।

— मॉरिस किसेव्स

Answer 2

Textarea आकार नियंत्रण CSS3 आकार संपत्ति के माध्यम से उपलब्ध है :

textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }

स्वीकार्य मूल्य स्व-व्याख्यात्मक: none(बनावट का आकार बदलने में अक्षम करता है) both, verticalऔर horizontal।

ध्यान दें कि क्रोम, फ़ायरफ़ॉक्स और सफारी में डिफ़ॉल्ट है both।

आप चौड़ाई और पाठ क्षेत्र तत्व की ऊंचाई सीमित करना चाहते हैं, कि एक समस्या नहीं है: इन ब्राउज़रों भी सम्मान करते हैं max-height, max-width, min-height, और min-widthसीएसएस गुण निश्चित अनुपात के भीतर आकार बदलने प्रदान करने के लिए।

कोड उदाहरण :

#textarea-wrapper {
  padding: 10px;
  background-color: #f4f4f4;
  width: 300px;
}

#textarea-wrapper textarea {
  min-height:50px;
  max-height:120px;
  width: 290px;
}

#textarea-wrapper textarea.vertical { 
  resize: vertical;
}

<div id="textarea-wrapper">
  <label for="resize-default">Textarea (default):</label>
  <textarea name="resize-default" id="resize-default"></textarea>
  
  <label for="resize-vertical">Textarea (vertical):</label>
  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>

Comments

इस टिप्पणी बॉक्स का निरीक्षण कर रहा हूं जिसमें मैं टाइप कर रहा हूं; एस / ओ का उपयोग करता है resize:vertical:) यह "सही" समाधान प्रतीत होता है यदि आप जितना चाहें उतना ऊर्ध्वाधर आकार बदलने के लिए देख रहे हैं!

— mjohnsonengr

Answer 3

मुझे आशा है कि आपको वही समस्या हो रही है जो मेरे पास थी ... मेरा मुद्दा सरल था: कंटेनर के अंदर लॉक किए गए प्रतिशत के साथ एक निश्चित बनावट बनाएं (मैं सीएसएस / जेएस / एचटीएमएल के लिए नया हूं, इसलिए मेरे साथ सहन करें, अगर मैं लिंगो को सही न करें) ताकि जिस भी उपकरण पर यह प्रदर्शित हो रहा है, वह कंटेनर (टेबल सेल) को भरने वाली कोई भी जगह सही मात्रा में न भरे। यहां बताया गया है कि मैंने इसे कैसे हल किया:

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

फिर CSS इस तरह दिखता है ...

#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

यहाँ मैला कोड ब्लॉक के लिए क्षमा करें, लेकिन मुझे आपको दिखाना होगा कि क्या महत्वपूर्ण है और मुझे नहीं पता कि इस वेबसाइट पर उद्धृत सीएसएस कोड कैसे डाला जाए। किसी भी मामले में, यह सुनिश्चित करने के लिए कि आप किस बारे में बात कर रहे हैं, महत्वपूर्ण सीएसएस यहां कम है ...

तब मैंने जो किया (जैसा कि यहां दिखाया गया है) बहुत विशिष्ट रूप से प्रतिशत को ट्विस्ट करता है जब तक कि मुझे नहीं मिला कि पूरी तरह से फिट प्रदर्शन के लिए काम किया है, चाहे कोई भी डिवाइस स्क्रीन का उपयोग किया गया हो।

दी, मुझे लगता है कि "आकार: कोई नहीं;" ओवरकिल है, लेकिन खेद से बेहतर सुरक्षित है और अब उपभोक्ताओं के पास बॉक्स को आकार देने के लिए वैसे भी नहीं होगा, और न ही इससे कोई फर्क नहीं पड़ेगा कि वे इसे किस डिवाइस से देख रहे हैं।

यह बहुत अच्छा काम करता है।

Comments

आपका HTML गलत तरीके से स्वरूपित किया गया है। टीआर को एक टीडी की जरूरत है।

— कीऑफजे

Answer 4

textarea {
width: 700px;  
height: 100px;
resize: none; }

Textarea के लिए अपनी आवश्यक चौड़ाई और ऊंचाई असाइन करें और फिर उपयोग करें। आकार: कोई नहीं; css प्रॉपर्टी जो textarea की स्ट्रेचेबल प्रॉपर्टी को डिसेबल कर देगी।

Comments

यही मुख्य उत्तर के समान है।

— लॉरेंज मेयर