¿Cómo puedo evitar que el área de texto se extienda más allá de su elemento DIV padre? (solo problema de google-chrome)


100

¿Cómo puedo evitar que el área de texto se extienda más allá de su elemento DIV padre?

Tengo este área de texto dentro de una tabla que está dentro de un DIV y parece que hace que toda la tabla se extienda fuera de sus límites.

Puede ver un ejemplo de la misma situación incluso en un caso más simple, simplemente colocando un área de texto dentro de un div (como el que se usa aquí en www.stackoverflow.com)

¿Puede ver en las imágenes a continuación que el área de texto puede extenderse más allá del tamaño de su padre? ¿Cómo puedo prevenir esto?

Soy un poco nuevo en CSS, por lo que realmente no sé qué atributos de CSS debería usar. Probé varios como pantalla y desbordamiento . Pero parece que no funcionan. ¿Algo más que me haya perdido?

la sección div

el área de texto

ACTUALIZACIÓN: HTML

CSS

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

Si pones este código dentro de http://jsfiddle.net , verás que actúan de manera diferente. Aunque el área de texto está limitada al porcentaje declarado en su estilo css, aún es posible hacer que su tabla padre sea tan grande como quiera, y luego puede ver que se desborda sobre su borde padre. ¿Alguna idea sobre como arreglar esto?


2
@Makoto: vea la fecha en la que se publicó esta pregunta.
Itay Levin

Respuestas:


171

Para deshabilitar el cambio de tamaño por completo:

textarea {
    resize: none;
}

Para permitir solo el cambio de tamaño vertical:

textarea {
    resize: vertical;
}

Para permitir solo el cambio de tamaño horizontal:

textarea {
    resize: horizontal;
}

O puede limitar el tamaño:

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

Para limitar el tamaño al ancho y / o alto de los padres:

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

2
¿Puedo mantener el estiramiento manual disponible solo para limitar el estiramiento permanece en el límite de su elemento principal?
Itay Levin

¿Es un atributo CSS? no es válido en css 2.1
Itay Levin

Sí, es un atributo CSS pero no se validará. También actualicé mi respuesta.
Māris Kiseļovs

Me pregunto si podría hacerlo funcionar también con el ancho como porcentaje y no como un número fijo de píxeles. porque quiero permitir que el usuario cambie el tamaño del área de texto pero no rompa la estructura de la pantalla.
Itay Levin

10
Establecer el ancho máximo como porcentaje funciona bien: jsfiddle.net/paGE3 . Por cierto, acepta mi respuesta si está funcionando.
Māris Kiseļovs

19

El control de cambio de tamaño de Textarea está disponible a través de la propiedad de cambio de tamaño de CSS3 :

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

Los valores permitidos se explican por sí mismos: none(deshabilita el cambio de tamaño del área de texto) both, verticaly horizontal.

Tenga en cuenta que en Chrome, Firefox y Safari el valor predeterminado es both.

Si desea limitar el ancho y la altura del elemento de área de texto, eso no es un problema: estos navegadores también respetan max-height, max-width, min-height, ymin-width las propiedades CSS para proporcionar el cambio de tamaño dentro de ciertas proporciones.

Ejemplo de código :

#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>


3
Inspeccioné este cuadro de comentarios en el que estoy escribiendo; Usos S / O resize:vertical:) Parece ser la solución "correcta" si estás buscando cambiar el tamaño verticalmente tanto como quieras.
mjohnsonengr

1

Estoy esperando que usted está teniendo el mismo problema que yo tuve ... mi problema era simple: Hacer un área de texto fijo con porcentajes encerrados en el interior del contenedor (soy nuevo en CSS / JS / HTML, por lo oso conmigo, si yo no entiendo la jerga correcta) de modo que, independientemente del dispositivo en el que se muestre, la caja que llena el contenedor (la celda de la tabla) ocupa la cantidad correcta de espacio. Así es como lo resolví:

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

Entonces CSS se ve así ...

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

Perdón por el bloque de código descuidado aquí, pero tuve que mostrarte lo que es importante y no sé cómo insertar el código CSS entre comillas en este sitio web. En cualquier caso, para asegurarse de que ve de lo que estoy hablando, el CSS importante está menos sangrado aquí ...

Lo que hice luego (como se muestra aquí) fue ajustar muy específicamente los porcentajes hasta que encontré los que funcionaban perfectamente para adaptarse a la pantalla, sin importar qué pantalla de dispositivo se use.

Por supuesto, creo que el "resize: none;" es exagerado, pero es mejor prevenir que curar y ahora los consumidores no tendrán que cambiar el tamaño de la caja, ni importará desde qué dispositivo lo estén viendo.

Funciona muy bien.


Su HTML tiene un formato incorrecto. El TR necesita un TD.
KeyOfJ

0
textarea {
width: 700px;  
height: 100px;
resize: none; }

asigne su ancho y alto requeridos para el área de texto y luego use. redimensionar: ninguno; css que deshabilitará la propiedad extensible del área de texto.


Eso es lo mismo que la respuesta principal.
Lorenz Meyer
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.