Wie kann ich verhindern, dass sich der Textbereich über sein übergeordnetes DIV-Element hinaus erstreckt? (nur Google-Chrome-Problem)

Wie kann ich verhindern, dass sich der Textbereich über das übergeordnete DIV-Element hinaus erstreckt?

Ich habe diesen Textbereich in einer Tabelle, die sich in einem DIV befindet, und es scheint, dass sich die gesamte Tabelle außerhalb ihrer Grenzen erstreckt.

Sie können ein Beispiel für dieselbe Situation auch in einem einfacheren Fall sehen, indem Sie einfach einen Textbereich in ein div einfügen (wie hier in www.stackoverflow.com verwendet).

Sie können den Bildern unten entnehmen, dass sich der Textbereich über die Größe des übergeordneten Bereichs hinaus erstrecken kann. Wie verhindere ich das?

Ich bin ein bisschen neu in CSS, daher weiß ich nicht wirklich, welche CSS-Attribute ich verwenden soll. Ich habe mehrere wie Anzeige und Überlauf versucht . Aber sie scheinen den Trick nicht zu tun. Was hätte ich sonst noch vermissen können?

UPDATE: HTML

CSS

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

Wenn Sie diesen Code in http://jsfiddle.net einfügen , werden Sie feststellen , dass sie sich anders verhalten . Obwohl der Textbereich auf den in seinem CSS-Stil deklarierten Prozentsatz beschränkt ist, ist es dennoch möglich, die übergeordnete Tabelle so groß zu machen, wie sie sein möchte, und dann können Sie sehen, dass sie über den übergeordneten Rand hinausgeht. Irgendwelche Gedanken darüber, wie man das behebt? Wenn Sie

So deaktivieren Sie die Größenänderung vollständig:

textarea {
    resize: none;
}

So erlauben Sie nur die vertikale Größenänderung:

textarea {
    resize: vertical;
}

So erlauben Sie nur eine horizontale Größenänderung:

textarea {
    resize: horizontal;
}

Oder Sie können die Größe begrenzen:

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

So beschränken Sie die Größe auf die Breite und / oder Größe der Eltern:

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

Das Steuerelement für die Größenänderung von Textbereichen ist über die CSS3-Eigenschaft zum Ändern der Größe verfügbar :

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

Zulässige Werte selbsterklärend: none(gerecht TextArea- Ändern der Größe) both, verticalund horizontal.

Beachten Sie, dass in Chrome, Firefox und Safari die Standardeinstellung lautet both.

Wenn Sie die Breite und Höhe des textarea - Elements beschränken wollen, ist das kein Problem: dieser Browser auch respektieren max-height, max-width, min-height, und min-widthCSS - Eigenschaften Ändern der Größe innerhalb bestimmter Verhältnisse zu sorgen.

Codebeispiel :

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

Ich hoffe , dass Sie das gleiche Problem haben , dass ich hatte ... meine Frage war einfach: Machen Sie ein festes Textfeld mit gesperrten Prozent im Innern des Behälters (Ich bin neu in CSS / JS / HTML, so Bär mit mir, wenn ich Verstehen Sie den Jargon nicht richtig), damit die Box, die den Behälter (die Tischzelle) füllt, unabhängig vom Gerät, auf dem sie angezeigt wird, den richtigen Platz einnimmt. So habe ich es gelöst:

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

Dann sieht CSS so aus ...

#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;
}

Entschuldigen Sie den schlampigen Codeblock hier, aber ich musste Ihnen zeigen, was wichtig ist, und ich weiß nicht, wie ich zitierten CSS-Code auf dieser Website einfügen soll. Um sicherzustellen, dass Sie sehen, wovon ich spreche, wird das wichtige CSS hier auf jeden Fall weniger eingerückt ...

Was ich dann getan habe (wie hier gezeigt), ist, die Prozentsätze ganz spezifisch zu optimieren, bis ich diejenigen gefunden habe, die perfekt zur Anzeige passen, unabhängig davon, welcher Gerätebildschirm verwendet wird.

Zugegeben, ich denke die "Größe ändern: keine;" ist übertrieben, aber sicherer als leid, und jetzt müssen die Verbraucher die Größe der Box ohnehin nicht mehr ändern, und es spielt auch keine Rolle, von welchem ​​Gerät aus sie sie anzeigen.

Es funktioniert großartig.

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

Weisen Sie dem Textbereich die gewünschte Breite und Höhe zu und verwenden Sie dann. Größe ändern: keine; CSS-Eigenschaft, die die dehnbare Eigenschaft des Textbereichs deaktiviert.