10

私は次のものを持っていtextareaますtable：

<table width="300"><tr><td>

<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>

</td></tr></table>

textarea に長い文字列があると、IE7 では 1 行に収まるように textarea が拡張されますが、他のブラウザーでは 300px の幅が維持されます。

IEでこれを修正する方法についてのアイデアはありますか?

4

12 に答える 12

5

tdではなく に幅を適用しtableます。

編集: @Emmett - 幅は、CSS を介して簡単に適用できます。

td {
    width: 300px;
}

望ましい結果が得られます。または、jQuery を使用している場合は、スクリプトを使用して幅を追加できます。

$('textarea[width=100%]').parent('td').css('width', '300px');

つまり、開発上の制約により直接適用できない場合、表のセルに幅を適用する方法は複数あります。

于 2008-08-29T04:15:06.533 に答える
2

別のハッキーなオプションですが、私にとって有効な唯一のオプション（このページの他の提案はありません）は、固定テーブルレイアウトの単一セルテーブルでテキストエリアをラップすることです。

<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>
于 2009-02-27T13:19:18.830 に答える
2

@ピーター・マイヤー、ジム・ロバート

さまざまなオーバーフロー値を試しましたが、役に立ちませんでした。

wrap 属性と word-wrap スタイルのさまざまな値を試してみても、実りはありませんでした。

編集：

@ダンセイズ、ショーン

アプリケーション固有の制約により、幅はテーブルにのみ適用できます。

@トラヴィス

style="word-break:break-all;" の設定 うまくいった！IE7 と FF ではまだラップが異なります。これ以上良いものがない場合は、この回答を受け入れます。

于 2008-08-29T04:15:42.507 に答える
1

別の非常にハッキーなオプションです。多くの制約に悩まされているが、周囲のdomがどのようになるかを知っている場合： 

style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"

きれいではありませんが、IE7では機能します。
jqueryまたは同様のものを使用することは、はるかに優れたソリューションですが、他の制約によって異なります。

于 2008-08-30T01:50:58.917 に答える
0

この問題を解決するには、テキストにスペースを使用し、このコードも使用します

overflow:hidden
于 2012-10-22T10:03:48.790 に答える
0

IE はword-breakCSS 3 プロパティもサポートしています。

于 2008-08-29T04:13:32.463 に答える
0

それを機能させるために私が見つけた最善のこと、少しハック： オーバーフロー値をいじりたいかもしれない
ラップテキストエリア<div style="width:300px; overflow:auto;">

于 2008-08-29T04:15:44.580 に答える
0

試しましたか...

overflow: hidden;

??

それがテキストエリアのテーブルにあるべきかどうかわかりません...少し実験してください

于 2008-08-29T04:00:03.230 に答える
0

または、どうですか：

overflow: scroll;

編集：

これを実際にテストしてみました。幅がテーブル上にあるため、動作はそのようなものだと思います（これを裏付けるものは何もありません）テーブルの幅は推奨される幅ですが、その内容に合わせて拡張できることをずっと前に読みました。わからない。<DIV>テーブルではなくa を使用すると、機能することがわかります。<TD>さらに、要素ではなく、包含要素に 300 ピクセル幅を適用すると、<TABLE>同様に機能します。また、overflow: scrollは何もしません。:P

確かに、素敵でファンキーな IE の動作です。

于 2008-08-29T04:03:11.443 に答える
0

オーバーフロー プロパティが最適です。特に、余分なテキストを無視したい場合は、テキストの css プロパティとして「overflow:hidden」を使用できます。

一般に、ブラウザーにスペースのない長い文字列などの壊れないオブジェクトがある場合、さまざまなサイズの制約 (文字列 (長い) とそのコンテナー (短い) の制限) の間で競合が発生する可能性があります。異なるブラウザーで異なる動作が見られる場合は、この競合の解決方法が異なっているだけです。

ところで、長い文字列に対して利用できる便利なトリックがあります - <wbr> タグです。ブラウザーが longstringlongstring を認識すると、それを単一の途切れのない文字列としてコンテナーに収めようとしますが、収まらない場合は、その文字列を wbr で半分に分割します。これは基本的に、可能であればそこで中断しないという暗黙の要求を持つブレークポイントです (印刷されたテキストのハイフンのようなものです)。ところで、Safari と Opera の一部のバージョンでは少しバグがあります。詳細については、この quirksmode ページを確認してください。

于 2008-08-29T08:45:34.620 に答える
0

幅をピクセル単位で指定します。これは適切に機能するはずです

于 2012-11-28T10:38:56.577 に答える
0

私は以前にこの問題に遭遇しました。これは、HTML がテーブルとセルの幅を解析する方法に関連しています。

要素のコンテンツがそれを超えない限り、幅として 300 を設定しても問題ありません (内部に明確な幅を持つ div を設定し、オーバーフロー ルールを設定するのが私のお気に入りの方法です)。

しかし、上記のような解決策がなければ、いずれかの要素があなたをその幅を超えて押し込む瞬間、すべての賭けはオフになります. 要素は、コンテンツを収容するために必要な幅になります。

追加のヒント - 値を適切にネストする引用符のセットで幅の値を囲みます ( <table width='300')。誰かがやってきて % に変更すると、% は無視されます。それ以外の場合は無視されます。

残念ながら、IE で「自然な」改行を持たない文字列を改行するには、コードを介して何らかの方法で区切ることができない限り、常に問題が発生します。

于 2009-01-16T15:13:58.113 に答える