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

span style font

Question

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

Tengo este textarea dentro de una tabla que está dentro de un DIV y parece que hace que toda la tabla se estire 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 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 elemento primario? ¿Cómo evito esto?

Soy un poco nuevo en CSS, así que no sé realmente qué atributos de CSS debo usar. Intenté varios como pantalla y desbordamiento . Pero ellos no parecen hacer el truco. ¿Algo más que podría haber perdido?

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á limitado al porcentaje declarado en su estilo CSS, aún es posible lograr que su tabla principal sea tan grande como quiera, y luego puede ver que se extiende sobre su borde principal. ¿Alguna idea sobre como arreglar esto? 1.

Answer 1

Espero que tengas el mismo problema que yo ... mi problema era simple: crea un área de texto fija con porcentajes bloqueados dentro del contenedor (soy nuevo en CSS / JS / HTML, así que ten paciencia, si no haga que la jerga sea correcta) para que no importa el dispositivo en el que se visualice, la caja que llena el contenedor (la celda de la tabla) ocupe 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;
}

Lo siento por el bloque de código descuidado aquí, pero tuve que mostrarle lo que es importante y no sé cómo insertar el código CSS citado 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 entonces (como se muestra aquí) es ajustar muy específicamente los porcentajes hasta que encontré los que funcionaban perfectamente para adaptarse a la pantalla, sin importar la pantalla del dispositivo que se utiliza.

De acuerdo, creo que el "cambio de tamaño: ninguno"; es exagerado, pero es mejor prevenir que lamentar y ahora los consumidores no tendrán de todos modos el tamaño de la caja, ni importará de qué dispositivo lo están viendo.

Funciona muy bien.

Answer 2

Para deshabilitar el cambio de tamaño por completo:

textarea {
    resize: none;
}

O puede limitar el tamaño:

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

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

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

Answer 3

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

Valores permitidos que se explican por sí solos: none (deshabilita el cambio de tamaño de texto), both vertical como horizontal .

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

Si desea restringir el ancho y alto del elemento textarea, eso no es un problema: estos navegadores también respetan las propiedades CSS max-height max-width , min-height y min-width 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>

Answer 4

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

asigne su ancho y alto requeridos para el área de texto y luego use. cambiar el tamaño: ninguno; propiedad css que desactivará la propiedad elástica del área de texto.