0

複数行のテキストを含むテキストエリアがあります。

<textarea>this will not clipped
the bottom of this line will be clipped</textarea>

そして、テキストの行の高さをフォント サイズの半分に設定する CSS があります。

textarea {
    color: #000000;
    font-size: 50px;
    line-height: 25px;
    text-align: center;
    height: 150px;
    width: 450px;
    overflow: hidden;
}

ただし、IE7/IE8/IE9 で表示すると、テキストエリアの最後の行が切り取られます。私は次のことを試しました：

  1. 後に改行を追加すると、その行が適切にレンダリングされます。これにより、アプリケーションで許可できないオーバーフローが発生します。
  2. 下に負のマージンと正のパディングを使用します。または、10px のような小さな高さの値と 140px のような大きなパディングの下部の値を使用します。これは問題なくレンダリングされますが、スクロールの高さとコンテナーの高さの測定値が失われます。このオプションを続行するには、コントロールを複製して一番上に浮かせ、実際のユーザー入力を別のコントロールにコピーする必要があります。
  3. textareaを aに切り替えてdiv設定contentEditable="true"し、HTML を介してユーザー コンテンツを管理します (改行の<br/>代わりに \n を意味しません)。
  4. JS を使用してテキストエリアの高さを「自動」に切り替え、属性を追加しますrow="5"が、テキストはクリップされたままになり、再レンダリングできるようにページに削除/追加しても機能しません。

jsFiddle でのデモ

4

1 に答える 1

0

テキストエリアの高さは、要素の行属性によって最適に制御されます。つまり、次のようになります。

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

また、スタイルから高さを削除します。

于 2013-01-22T21:53:39.120 に答える