html - attribute - div redimensionable como área de texto

title html

Question

Los navegadores permiten que las áreas de texto se vuelvan a clasificar según el tamaño arrastrando su esquina por abandono. Me preguntaba si esta regla se podría aplicar a otros elementos (un div por ejemplo). Sé que este efecto se puede lograr usando la función jQuery draggable o jQuery-ui de resizable , pero me gustaría hacerlo con html / css simple si es posible evitar confiar en esa biblioteca. ¿Hay alguna regla CSS que pueda aplicar a un div para que se comporte de esta manera?

Si tiene alguna otra solución, me gustaría escucharla.

Answer 1

Puedes hacer esto usando CSS3. Puede crear una etiqueta div tamaño variable configurando los estilos de cambio de tamaño y desbordamiento. He configurado el ajuste de tamaño tanto horizontal como vertical aquí:

.isResizable {
  background: rgba(255, 0, 0, 0.2);
  font-size: 2em;
  border: 1px solid black;
  overflow: hidden;
  resize: both;
  width: 160px;
  height: 120px;
  min-width: 120px;
  min-height: 90px;
  max-width: 400px;
  max-height: 300px;
}

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>

Answer 2

Use la propiedad de cambio de resize css3.

div {
    resize: both;
}

También hay un cambio de resize: horizontal y cambio de resize: vertical .

Actualmente no se usa el navegador cruzado http://caniuse.com/#feat=css-resize