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

100

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?

der div Abschnitt

der Textbereich

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

Itay Levin
quelle
2
@Makoto - siehe das Datum, an dem diese Frage veröffentlicht wird.
Itay Levin

Antworten:

170

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%;
}
Māris Kiseļovs
quelle
2
Kann ich die manuelle Dehnung weiterhin verfügbar halten, um die Dehnungsstreben in der Grenze des übergeordneten Elements zu begrenzen?
Itay Levin
Ist das ein CSS-Attribut? es ist nicht gültig in CSS 2.1
Itay Levin
Ja, es ist ein CSS-Attribut, das jedoch nicht überprüft wird. Ich habe auch meine Antwort aktualisiert.
Māris Kiseļovs
Ich frage mich, ob ich es auch mit der Breite als Prozentsatz und nicht mit einer festen Anzahl von Pixeln funktionieren lassen könnte. weil ich dem Benutzer erlauben möchte, die Größe des Textbereichs zu ändern, aber nicht die Bildschirmstruktur aufzuschlüsseln.
Itay Levin
10
Das Festlegen der maximalen Breite als Prozentsatz funktioniert gut - jsfiddle.net/paGE3 . Übrigens, bitte akzeptieren Sie meine Antwort, wenn es funktioniert.
Māris Kiseļovs
19

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>

Yosvel Quintero Arguelles
quelle
3
Inspiziert dieses Kommentarfeld, das ich eingebe; S / O verwendet resize:vertical:) Es scheint die "richtige" Lösung zu sein, wenn Sie die Größe vertikal ändern möchten, so viel Sie möchten!
mjohnsonengr
1

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.

Steven L.
quelle
Ihr HTML ist falsch formatiert. Der TR benötigt einen TD.
KeyOfJ
0
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.

Siddhartha Chowdhury
quelle
Das ist das gleiche wie die Hauptantwort.
Lorenz Meyer