0

este es el texto que deseo que se desplace hacia abajo al especificarle una medida de ancho al elemento DIV se supone que aqui tego eque cita


pero al espcificarle un ancho al DIV por medio de CSS, el texto se sale del contendor DIV.
aqui dejo el código CSS
*{
    margin: 0;
    box-sizing: border-box;
    font-family: arial;
    font-size: 40px;
}

div{
    
    /*aqui es donde le expecifico el ancho a 70px*/
    width: 70px;


    padding: 20px;
    background: coral;
    display: inline-block;
}

y este es el resultado que tengo:

introducir la descripción de la imagen aquí



y el resultado que deseo obtener es el siguiente:

introducir la descripción de la imagen aquí


Cabe destacar que la altura(height) es la que quiero que vaya cambiando con respecto el texto se vaya desplazando hacia abajo, pero quiero que el ancho se mantenga fijo con la medida que yo mismo le designe en css.

También quisiera tener una forma rapida y no tan laboriosa, me refiero a laboriosa como meter un flex-container dentro de otro flex-container y agregar un "flex-wrap:wrap;"

3 respuestas 3

1

El caso es que al indicar box-sizing en la declaración universal *, estás causando esto.

Exactamente no sé que contendrá tu div, simplemente texto, o un párrafo mediante p o algo más. Pero si es simplemente texto, ¿Por qué no usar p?

Bueno, tal cual como está planteado, deduzco que es un simple texto en un div, y simplemente agregando overflow-wrap, a mí me funcionó. Pero aún así, 70px le hace muy mal aspecto. Prueba con más píxeles hasta calcularle una vista adecuada, o reduce el pixel del texto.

* {
 margin: 0;
 box-sizing: border-box;
 font-family: arial;
 font-size: 40px;
}

div {
 width: 70px;
 padding: 20px;
 background: coral;
 display: inline-block;
 overflow-wrap: break-word;
}
<div class="">
 este es el texto que deseo que se desplace hacia abajo al especificarle una medida de ancho al elemento DIV
</div>

1
  • 1
    Muchas gracias amigo, encerio me sirvio de mucho tu ayuda, funciona a la perfección
    – OwOscarxD
    Commented el 17 oct. 2021 a las 16:52
1

probaría cambiando width: min-content; dentro del div,

div{
  width: min-content;
  padding: 20px;
  background: coral;
  display: inline-block;
}
1
  • No funciona , la razón es que con esto no puedo modificar el ancho del DIV, el navegador es quien lo establece, Y EL PUNTO PRINCIPAL es que el texto SE RECORRA, no que el ancho de adapte al contenido, SINO QUE EL ANCHO SE ADAPTE AL CONTENIDO QUE SE DESPLAZA HACIA ABAJO CONFORME NO QUEPA EN EL WITDH.
    – OwOscarxD
    Commented el 17 oct. 2021 a las 16:48
0

El código se ve correcto, pero el ancho que has definido (70px) es menor al ancho de algunas palabras que tienes en tu contenido. Si aumentas el ancho por ejemplo a 200px obtendrás el resultado que deseas.

2
  • no, pero el ancho es lo que no quiero modificar, solo quiero que las letras se desplacen hacia abajo, no modificar ni el tamaño de las letras ni el ancho del contenedor.
    – OwOscarxD
    Commented el 16 oct. 2021 a las 20:28
  • Comprendo. Pero si no modificas el ancho del contenedor o el tamaño de las letras, no podrás obtener la imagen esperada que compartiste i.sstatic.net/RAJgQ.png
    – spuente
    Commented el 16 oct. 2021 a las 20:31

Tu Respuesta

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

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