TextArea- mit 100% Breite ignoriert Breite des übergeordneten Elements in IE7

Question

Ich habe folgende TextArea- in einer Tabelle:

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

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

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

mit einer langen Kette in der TextArea- die TextArea- streckt es in IE7 in einer Zeile unterbringen out , behält aber seine 300px Breite in anderen Browsern bei.

Irgendwelche Ideen, wie man dies in IE zu beheben?

Answer 1

haben Sie versucht ...

overflow: hidden;

??

Ich bin mir nicht sicher, ob es in der Tabelle des Textbereiches sein sollte ... experimentiert ein wenig

Answer 2

oder, wie etwa:

overflow: scroll; 

Edit:

ich tatsächlich getestet Dies. Ich denke, das Verhalten ist so, weil die Breite auf dem Tisch ist, was ich glaube (ich habe nichts, um dies zu untermauern) Ich habe vor langer Zeit gelesen, dass die Tabellenbreite Breite vorgeschlagen wird, kann aber erweitert werden, um seinen Inhalt aufzunehmen. Nicht sicher. Ich weiß, wenn Sie eine <DIV> anstelle einer Tabelle verwenden, funktioniert es. Wenn Sie die 300-Pixel-Breite auf dem enthaltenden <TD>-Element im Gegensatz zu dem <TABLE>-Element anwenden, funktioniert es außerdem außerdem. Auch das overflow: scroll tut nichts! : P

Schönes, funky IE-Verhalten, sicher!

Answer 3

IE unterstützt auch die word-break CSS 3 Eigenschaft.

Answer 4

Übernehmen Sie die Breite auf die td, nicht die table.

EDIT: @Emmett - die Breite könnte genauso einfach über CSS angewendet werden.

td { 
    width: 300px; 
} 

erzeugt das gewünschte Ergebnis. Oder, wenn Sie jQuery verwenden, können Sie die Breite durch Skript hinzufügen:

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

Punkt ist, gibt es mehr als einen Weg, um eine Breite zu einer Tabellenzelle anwenden, wenn die Entwicklung Zwänge verhindern, dass Sie es direkt anwenden .

Answer 5

@Peter Meyer, Jim Robert

ich verschiedene Überlaufwerte versucht, ohne Erfolg.

Experimentieren mit verschiedenen Werten für das Wrap-Attribut und den Word-Wrap-Stil war auch nicht fruchtbar.

EDIT:

@dansays, seanb

Aufgrund einiger umständlich anwendungsspezifischen Einschränkungen kann die Breite nur auf die Tabelle angewendet werden.

@travis

Einstellung style = "word-break: break-all;" irgendwie funktioniert! In IE7 und FF ist es immer noch anders. Ich werde diese Antwort akzeptieren, wenn nichts Besseres auftaucht.

Answer 6

Das Beste, was ich finden konnte, damit es funktioniert, ein wenig hacky:
Wrap TextArea- mit <div style="width:300px; overflow:auto;"> könnte mit dem Überlaufwert spielen, um möchten

Answer 7

Die Überlaufeigenschaft ist der Weg zu gehen. Wenn Sie insbesondere möchten, dass der zusätzliche Text ignoriert wird, können Sie "overflow: hidden" als CSS-Eigenschaft für den Text verwenden.

Wenn ein Browser ein unzerbrechliches Objekt hat, z. B. eine lange Zeichenfolge ohne Leerzeichen, kann es im Allgemeinen zu einem Konflikt zwischen verschiedenen Größenbeschränkungen kommen: der String (lang) und dem Container (kurz). Wenn Sie in verschiedenen Browsern ein unterschiedliches Verhalten sehen, lösen sie diesen Konflikt nur anders auf.

Übrigens gibt es einen schönen Trick für lange Strings - das <wbr> Tag. Wenn Ihr Browser longstringlongstring sieht, dann versucht es , um es in den Container als eine einzige, nicht unterbrochene Zeichenfolge passen - aber wenn es nicht passen kann, wird es diese Zeichenfolge in der Hälfte auf der WBR. Es ist im Grunde ein Breakpoint mit einer impliziten Aufforderung, dort möglichst nicht zu brechen (sozusagen wie ein Bindestrich in gedruckten Texten). Übrigens, es ist ein kleiner Buggy in einigen Versionen von Safari und Opera - check out this quirksmode page für mehr.

Answer 8

Eine weitere sehr hacky Option, wenn Sie mit einer Menge von Einschränkungen stecken geblieben sind, aber wissen, was die umliegenden dom aussehen wird:

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

nicht schön, aber funktioniert in IE7.
Mit jquery oder ähnlichem wäre eine viel bessere Lösung, aber es hängt von den anderen Einschränkungen ab, die Sie haben.

Answer 9

Ich habe dieses Problem schon einmal kennengelernt. Es hängt damit zusammen, wie HTML Tabellen- und Zellbreiten analysiert.

Sie können 300 als Breite einstellen, solange der Inhalt des Elements das nicht überschreiten kann (indem Sie ein div mit einer bestimmten Breite innen setzen und eine Überlaufregel ist meine Lieblingsmethode).

Aber fehlt eine Lösung wie die oben genannten, die Minute jedes Element schiebt Sie über diese Breite, alle Wetten sind aus. Das Element wird so breit wie es sein muss, um den Inhalt aufzunehmen.

Zusätzlicher Tipp - Umschließen Sie Ihre Breitenwerte in jeder Menge von Anführungszeichen wird der Wert ordnungsgemäß verschachteln (<table width='300'). Wenn jemand mitkommt und ihn in% ändert, ignoriert er ansonsten%.

Leider werden Sie immer Probleme haben, Strings zu brechen, die keine "natürlichen" Breaks im IE haben, es sei denn, Sie können etwas tun, um sie durch Code zu brechen.

Answer 10

Eine andere Hacky-Option, aber die einzige Option, die für mich funktioniert - keine der anderen Vorschläge auf dieser Seite - besteht darin, das Textfeld in eine Tabelle mit einem festen Tabellenlayout zu schreiben.

<table style="width:100%;table-layout:fixed"><tr><td> 
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea> 
</td></tr></table> 

Answer 11

Für dieses Problem lösen Sie Platz in Ihrem Text verwenden, und auch Sie diesen Code verwenden

overflow:hidden 

Answer 12

Geben Sie die Breite in pixels.this sollte richtig

arbeiten