javascript - not - word wrap traduccion

Word-wrap: desglose no funciona. Problema de desbordamiento de texto en elemento arrastrable (5)

Por favor ayuda para resolver este problema. Actualmente tengo un div, que se puede arrastrar y el texto en el interior es editable. Y aquí el usuario puede cambiar el tamaño del texto usando el rango de tipo de entrada.

¿Es posible ocultar las letras de texto-lienzo, de modo que las letras que van más allá del borde de la imagen divina-lienzo y alcancen el col-sm-8 ?

Aquí, cuando el usuario escribe texto sin espacio, esa palabra va más allá de col-sm-8 . ¿Cómo resolver esto? Uso overflow:hidden y word-wrap:breakdown , pero no funciona.

.text-canvas { z-index: 1; position: absolute; } .imageupload { z-index: -1; }

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div class="col-sm-4"> <div name="anotherdiv"> <input type="range" min="12" max="54" id="fontsize"> </div> </div> <div class="col-sm-8"> <div class="parent-canvas"> <div class="text-canvas" id="text-canvas" contenteditable="true"> my text </div> <div class="image-canvas"> <div class="imageupload" onclick="submit_button()"> <img src="img.png"> </div> </div> </div> </div>

Luego usé .text-canvas{ word-break: break-all; } .text-canvas{ word-break: break-all; } . Ahora el texto no sale del col-sm-8 pero sigue saliendo de la imagen-div.

ACTUALIZACIÓN : actualmente resolví el problema usando padding-right:10% . Pero no creo que sea un buen método. Por favor, sugiera un método correcto.

Solución:

.parent-canvas usar las siguientes propiedades en su clase .parent-canvas :

.parent-canvas { display: inline-block; /* Display inline but retain the block-level characteristics */ overflow: hidden; /* Hide the text if it overflows the container */ position: relative; /* Text is removed from the normal flow with absolute position, use this to contain it */ }

Después de esto, tiene dos opciones, usando word-break o max-width en su clase .text-canvas :

.text-canvas { word-break: break-all; }

Fragmento de código:

.text-canvas { max-width: 100%; }

Fragmento de código:

También puede usar ambos si lo desea, no interfieren entre sí:

.text-canvas { word-break: break-all; max-width: 100%; }

Fragmento de código:

jsFiddle

Pruebas:

Windows 10 (64 bit):

Cromo 54.0.2840.71 m
FireFox 49.0.2
Edge 25.10586.0.0

IOS 10.1:

Iphone 6 Safari Mobile

Posible mejora de UX:

En mi opinión, un poco de mejora en la experiencia del usuario, al menos para Chrome y FF, podría estar agregando la propiedad cursor: grab; y cursor: grabbing; para que el usuario sepa que es un elemento que se puede arrastrar.

No sabía que era un elemento que se podía arrastrar después de publicar esta respuesta. Supongo que no le presté mucha atención a toda la pregunta ... las personas tienden a interactuar con las cosas rápidamente.

Tendrá que decidir si el cursor: text; Es mejor que grab y grabbing los.

Propiedades agregadas a las clases arrastrables de jQuery:

.ui-draggable { cursor: -webkit-grab; cursor: grab; } .ui-draggable-dragging { cursor: -webkit-grabbing; cursor: grabbing; }

Fragmento de código:

.text-canvas { z-index: 1; position: absolute; } .imageupload { z-index: -1; } .parent-canvas { display: inline-block; overflow: hidden; position: relative; } .text-canvas { word-break: break-all; max-width: 100%; } .image-canvas img { vertical-align: middle; } .ui-draggable { cursor: -webkit-grab; cursor: grab; } .ui-draggable-dragging { cursor: -webkit-grabbing; cursor: grabbing; }

Notas:

Para eliminar el espacio no deseado debajo del elemento img , use la propiedad vertical-align: middle; .

EDITAR:

Para evitar que el texto se desborde verticalmente cuando se aumenta el font-size , debe configurar la height: auto; a la clase .text-canvas .

Puedes hacer esto de diferentes maneras, uno podría estar haciendo esto:

$("#fontsize").on("change", function() { var v = $(this).val(); $(''.text-canvas'').css({ ''font-size'': v + ''px'', ''height'': ''auto'' }); });

Esto establecerá el valor auto que reemplaza al establecido por jQuery UI.

En la demostración, la imagen es bastante pequeña y el tamaño de la fuente puede llegar a ser demasiado grande, por lo que las dimensiones de su contenedor exceden las de sus padres, asegúrese de controlar eso en la producción.

Fragmento de código:

Establezca las dimensiones de .parent-canvas para que sean las mismas que las de la imagen, luego use overflow: hidden y position-relative a la posición para contener el texto en posición absoluta.

.parent-canvas { width: 300px; height: 200px; overflow: hidden; position: relative; }

.parent-canvas { width: 300px; height: 200px; overflow: hidden; position: relative; } .text-canvas { z-index: 1; position: absolute; } .imageupload { z-index: -1; }

Necesita https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

word-break: break-all;

.text-canvas { z-index: 1; position: absolute; word-break: break-all; } .imageupload { z-index: -1; } .parent-canvas { position: relative; }

utilizar text-overflow: ellipsis; o text-overflow: clip; se ocultará el texto de desbordamiento.

.text-canvas { z-index: 1; position: absolute; text-overflow: clip;/*ellipsis,initial*/ white-space: nowrap; overflow: hidden; width:3em;/*image div width*/ } .imageupload { z-index: -1; }

Para los padres

.parent-canvas{ display: inline-block; overflow: hidden; position: relative; }

Para niño (texto-lienzo)

.text-canvas { word-break: break-all; }

Manifestación

- Color de fondo agregado para mejores propósitos de demostración.

- Cambio de tamaño de fuente intermedio

.text-canvas { z-index: 1; position: absolute; word-break: break-all; } .imageupload { z-index: -1; } .col-sm-6 { background: red; } .c {padding: 5px;} .parent-canvas{ background: orange; display: inline-block; overflow: hidden; position: relative; } .text-canvas { background: yellow; min-width: 10px; }