Por algun motivo mi texto sigue desbordandose de mi DIV, no se si sea porque es un contenedor Flex
pero no encuentro como hacer que se adapte, le intente de todas las formas y no logro hacerlo.
<a href="#">
<div class="image image1">
<div class="margin">
<p class="tittle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, voluptate?</p>
<p class="hidden">Vamos a comprar pan</p>
</div>
</div>
.general-info {
margin: 50px;
display: inline-block;
width: 100%;
padding: 0px;
white-space: nowrap;
text-align: center;
}
.image {
position: relative;
background-size: cover;
background-repeat: no-repeat;
height: 270px;
max-height: 500px;
width: 50%;
min-width: 300px;
padding: 10px 11px 12px 10px;
max-width: 500px;
display: inline-block;
margin: 0px 5px 0px 5px;
object-fit: cover;
}
.image::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(206, 83, 77, .6);
transition: 2s;
opacity: 0;
}
.image:hover::before {
opacity: 1;
transition: .6s;
z-index: 7;
}
.image1 {
background-image: url("../../../public/img/general-info/girasoles.jpg");
}
.image2 {
background-image: url("../../../public/img/general-info/bosque.jpg");
}
.margin {
position: inherit;
display: flex;
align-items: flex-end;
height: 100%;
border: 2px solid rgb(255, 255, 255);
z-index: 10;
word-break: break-all;
}
.margin .tittle {
position: relative;
color: white;
width: 300px;
bottom: 5px;
left: 5px;
font-size: 30px;
z-index: 10;
transition: .6s;
text-transform: uppercase;
word-break: break-all;
}
.image:hover .margin .tittle {
bottom: 25px;
transition: .6s;
}
.image .margin .hidden {
position: absolute;
left: 7px;
bottom: -10px;
color: white;
opacity: 0;
transition: .6s;
}
.image:hover .margin .hidden {
opacity: 1;
transition: .6s;
z-index: 7;
bottom: 5px;
transition: .6;
}
Necesito que se cree una segunda linea de texto pero que no se salga de la caja sino que siga creciendo hacia arriba como en la segunda imagen