html - only - textarea con un ancho del 100% ignora el ancho del elemento principal en IE7
if ie css (12)
IE también es compatible con la propiedad CSS 3 de word-break .
Tengo el siguiente textarea en una tabla:
<table width="300"><tr><td>
<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>
</td></tr></table>
Con una cadena larga en el área de texto, el área de texto se extiende para acomodarlo en una línea en IE7, pero conserva su ancho de 300 píxeles en otros navegadores.
¿Alguna idea sobre cómo solucionar esto en IE?
La propiedad de desbordamiento es el camino a seguir. En particular, si desea que se ignore el texto adicional, puede usar "overflow: hidden" como una propiedad css en el texto.
En general, cuando un navegador tiene un objeto irrompible, como una cadena larga sin espacios, puede haber un conflicto entre varias restricciones de tamaño: las de la cadena (larga) frente a su contenedor (corta). Si observa un comportamiento diferente en diferentes navegadores, solo resuelven este conflicto de forma diferente.
Por cierto, hay un buen truco disponible para cadenas largas: la etiqueta <wbr>. Si su navegador ve longstringlongstring, intentará colocarlo en el contenedor como una cadena única e ininterrumpida, pero si no cabe, dividirá esa cadena a la mitad en el wbr. Básicamente es un punto de ruptura con una solicitud implícita de no romper allí, si es posible (algo así como un guión en los textos impresos). Por cierto, es un poco problemático en algunas versiones de Safari y Opera: echa un vistazo a esta página de modo peculiar para obtener más información.
has probado...
overflow: hidden;
??
No estoy seguro de si debería estar en la tabla del área de texto ... experimentar un poco
Otra opción muy hacky, si estás atrapado con un montón de limitaciones, pero sé cómo se verá el dom circundante:
style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +''px'')"
no es bonito, pero funciona en IE7.
Usar jquery o similar sería una solución mucho más ordenada, pero depende de las otras limitaciones que tenga.
Me he encontrado con este problema antes. Está relacionado con cómo HTML analiza los anchos de las tablas y celdas.
Está bien configurar 300 como ancho, siempre y cuando el contenido del elemento nunca exceda eso (estableciendo un div con un ancho definido dentro y una regla de desbordamiento es mi forma favorita).
Pero a falta de una solución como la anterior, al minuto CUALQUIER elemento lo empuja más allá de ese ancho, todas las apuestas están apagadas. El elemento se vuelve tan ancho como debe para acomodar los contenidos.
Consejo adicional: coloque sus valores de ancho en cualquier conjunto de comillas que anidará el valor correctamente ( <table width=''300'' ). Si alguien aparece y lo cambia a%, ignorará el%, de lo contrario.
Desafortunadamente, siempre tendrás problemas para romper cadenas que no tienen cortes "naturales" en IE, a menos que puedas hacer algo para dividirlas mediante el código.
Otra opción hacky, pero la única opción que funciona para mí, ninguna de las otras sugerencias en esta página, es envolver el área de texto en una sola tabla de celda con un diseño de tabla fijo.
<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>
Para resolver este problema, use espacio en su texto, y usted también usa este código
overflow:hidden
Proporcione el ancho en píxeles. Esto debería funcionar correctamente
Aplica el ancho al td , no a la table .
EDITAR: @Emmett: el ancho podría aplicarse tan fácilmente a través de CSS.
td {
width: 300px;
}
produce el resultado deseado. O bien, si está utilizando jQuery, puede agregar el ancho a través del script:
$(''textarea[width=100%]'').parent(''td'').css(''width'', ''300px'');
En este caso, hay más de una forma de aplicar un ancho a una celda de la tabla, si las limitaciones de desarrollo le impiden aplicarlo directamente.
o, qué tal:
overflow: scroll;
Editar:
De hecho, probé esto. Creo que el comportamiento es tal porque el ancho está sobre la mesa, lo que creo (no tengo nada que respalde esto) Hace mucho tiempo leí que el ancho de la tabla es un ancho sugerido , pero puede ampliarse para acomodar su contenido. No es seguro. Sé que si usas un <DIV> lugar de una mesa, funciona. Además, si aplica el ancho de 300 píxeles al elemento <TD> contiene el elemento <TABLE> , también funciona. Además, el overflow: scroll no hace nada! :PAG
Comportamiento agradable, funky IE, seguro!
Lo mejor que pude encontrar para que funcione, un poco hacky:
envolver textarea con <div style="width:300px; overflow:auto;"> podría querer jugar con el valor de desbordamiento
Intenté diferentes valores de desbordamiento, sin éxito.
Experimentar con diferentes valores para el atributo de ajuste y el estilo de ajuste de palabras tampoco fue fructífero.
EDITAR:
Debido a algunas restricciones incómodas específicas de la aplicación, el ancho solo se puede aplicar a la tabla.
@ travis
Estilo de configuración = "salto de palabra: romper todo"; tipo de trabajado! Todavía se envuelve de manera diferente en IE7 y FF. Aceptaré esta respuesta si no sale nada mejor.