Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] Longitud en oraciones

Referente al curso HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación, en el capítulo Lista con Productos y actividad Reforzando el inline-block

por Sasha Solange Alejandra Patow Gironda
| 113.4k xp | 29 posts

En el video , se arregla sólo el ancho de las oraciones y junto con ello el tamaño del div . En mi caso si edito mas letras , no se salta la linea de forma automatica pag live` html 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    background-color: #cccc;

}
#logo{
    width: 6%;
    margin: 5px 0 0 20px;

}
.nav-bar {
    position: absolute;
    align-items: center;
    top: 40px;
    right :0;
}

.opciones-especificas{
    background-color: red;

}
nav li {
 display: inline-flex;
 margin: 0 15px;

}
nav a {
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;


}
.opciones{
    display: flex;
    justify-content: space-evenly;
    padding-top: 35px;
    text-align: center;


}

#img-opciones{
    width: 100%;
}
h2{
    font-size: 30px;
}
p{
    padding: 10px;
}
p1{
    font-size: 25px;
}
.p2{
    font-size: 20px;
    font-weight: bold;
}
1 respuesta
por Rafaela Rocha
| 2875.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Sasha!

Por lo que puedo ver en tu código, estás utilizando la propiedad width para definir el ancho de tu contenedor de texto. Sin embargo, esto no es suficiente para que el texto se ajuste automáticamente a la siguiente línea cuando llega al final del contenedor.

Para lograr esto, necesitas agregar la propiedad word-wrap: break-word; al contenedor de texto en tu CSS. Esto permitirá que las palabras se dividan en la siguiente línea cuando lleguen al final del contenedor.

Tu código debería verse así:

.texto{
    width: 50%;
    margin: 0 auto;
    word-wrap: break-word;
}

Espero que esto te ayude a resolver tu problema. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)