web-dev-qa-db-ja.com

textareaが親DIV要素を超えて広がるのを防ぐにはどうすればよいですか？ （google-chromeの問題のみ）

Textareaが親DIV要素を超えて広がるのを防ぐにはどうすればよいですか？

DIV内にあるテーブル内にこのテキスト領域があり、テーブル全体がその境界からはみ出ているようです。

より単純な場合でも、同じ状況の例を見ることができます。div内にテキスト領域を置くだけです（ここでwww.stackoverflow.comで使用されているもののように）

下の画像から、textareaが親のサイズを超えて拡大できることがわかりますか？これを防ぐにはどうすればよいですか？

私はCSSに慣れていないので、どのCSS属性を使用する必要があるのか​​本当にわかりません。私はdisplayとoverflowのようないくつかを試しました。しかし、彼らはそのトリックを行っていないようです。私が逃したかもしれない他のものは何ですか？

the div section

the text area

更新：HTML

CSS

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

このコードを http://jsfiddle.net 内に配置すると、それらの動作が異なることがわかります。 textareaはcssスタイルで宣言されたパーセンテージに制限されていますが、親テーブルを必要な大きさにするように設定することはまだ可能であり、その後、親の境界線上にあふれていることがわかります。これを修正する方法についての考えはありますか？

cssgoogle-chrometextarea
93
Itay Levin

サイズ変更を完全に無効にするには：

textarea {
    resize: none;
}

または、サイズを制限できます。

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

親の幅および/または高さにサイズを制限するには：

textarea {
    max-width: 100%; 
    max-height: 100%;
}
157
Māris Kiseļovs

Textareaのサイズ変更コントロールは、 CSS3サイズ変更プロパティ で利用できます。

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

許可される値は一目瞭然です：none（テキストエリアのサイズ変更を無効にします）、both、vertical、およびhorizontal。

注意Chrome、Firefox、Safariではデフォルトはbothです。

Textarea要素の幅と高さを制限したい場合、それは問題ではありません。これらのブラウザはmax-height、max-width、min-height、およびmin-width CSSプロパティも尊重します特定の割合でサイズ変更を提供します。

コード例：

#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>
18
Yosvel Quintero

私があなたと同じ問題を抱えていることを願っていますhad ...私の問題は単純でした：コンテナ内にロックされたパーセンテージで固定テキストエリアを作成します言語を正しく理解できない場合はご容赦ください。表示するデバイスに関係なく、コンテナ（テーブルセル）を満たすボックスが適切なスペースを占有します。ここに私がそれを解決した方法があります：

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

ここのずさんなコードブロックで申し訳ありませんが、重要なことをお見せする必要があり、このWebサイトに引用符で囲まれたCSSコードを挿入する方法がわかりません。いずれにせよ、私が話していることを確認できるようにするために、重要なCSSはここではインデントされていません...

ここで示したように、私がやったことは、使用するデバイスの画面に関係なく、ディスプレイに合うように完全に機能するものが見つかるまで、パーセンテージを微調整することです。

確かに、「リサイズ：なし」と思います。はやり過ぎですが、申し訳ありませんが安全であり、消費者はボックスのサイズを変更する必要はありません。また、どのデバイスから表示するかは重要ではありません。

それは素晴らしい作品です。

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

textareaに必要な幅と高さを割り当ててから使用します。 resize：none; cssプロパティ。textareaの伸縮可能なプロパティを無効にします。

1
Siddhartha Chowdhury