0

Tengo un contenteditable div que luce así

introducir la descripción de la imagen aquí

Este campo es generado de la siguiente manera

<div class="entradaTexto" name="entradaTexto" ng-model="entradaTexto" contenteditable="true" 
style="
   height: 60px; 
   padding: 20px 20px 20px 20px; 
   background-color: #f7f8f8; 
   overflow-x: hidden; 
   overflow-y: hidden;" 
>{{entradaTexto}} </div>

La clase "entradaTexto" luce así

[contenteditable="true"].entradaTexto {
  white-space: nowrap;
  width:200px;
  overflow: hidden;
} 
[contenteditable="true"].entradaTexto br {
  display:none;

}
[contenteditable="true"].entradaTexto * {
  display:inline;
  white-space:nowrap;
}

El problema surge cuando se introduce un texto demasiado largo que abarca más del tamaño del campo, en ese caso, no se puede deslizar el contenido horizontalmente para la edición de este como en los input text

PD: soy consciente de que aplico una clase y un estilo a la vez

7
  • ¿Alguna razón para no usar un textarea? el 13 sep. 2022 a las 10:27
  • Quiero que el campo sea de una sola línea y que con un validador (que ya está hecho) se muestre con un <b> la parte del texto que está mal, por eso no me sirve el típico input, desconozco si con el textarea se pudiese hacer
    – Jaime2m1
    el 13 sep. 2022 a las 10:37
  • ¿Y si ajustas el tamaño de la fuente en relación al largo del texto? el 13 sep. 2022 a las 10:43
  • Es un poco cutre y aun así, el texto a introducir es tan largo que la mayoría de las veces se acabaría con un tamaño de letra ilegible
    – Jaime2m1
    el 13 sep. 2022 a las 11:04
  • Pues insertar un <br> en relación al largo del texto podría ser otra forma, pero al final dependerá de lo que necesites visualmente. el 13 sep. 2022 a las 11:06

1 respuesta 1

0

Al final he conseguido el resultado que esperaba

Sobre todo con mi navegador hacia falta la siguiente línea -webkit-scrollbar-width: none !important;

Mi código HTML luce así

<div class="entradaTexto" name="entradaTexto" ng-model="entradaTexto" contenteditable="true" 
style="
   height: 60px; padding: 
   20px 20px 20px 10px; 
   background-color: #f7f8f8;
">{{entradaTexto}}</div>

Con un css

.entradaTexto {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  /* for Internet Explorer, Edge */
  scrollbar-width: none !important;
  /* for Firefox */
}

.entradaTexto::-webkit-scrollbar {
  display: none !important;
} 

[contenteditable="true"].entradaTexto {
  white-space: nowrap !important;
  width:200px !important;
} 
[contenteditable="true"].entradaTexto br {
  display:none !important;

}
[contenteditable="true"].entradaTexto * {
  display:inline !important;
  white-space:nowrap !important;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.