estoy intentando hacer un código para poner 2 textos en una imagen:
El primero texto estará arriba a la izquierda. El segundo estará en el pie de la imagen.
Además siempre estos textos deberán posicionarse en esa posición, independientemente del alto y el ancho de la imagen, he probado varias imágenes y parece que funciona bien.
El problema es que cuando el texto del pié de la imagen es muyyy largo y la imagen es estrechita, el texto desborda, en vez de eso, quisiera que el texto fuera hacía arriba (hacía la mitad de la imagen) en vez del comportamiento típico que tiende a bajar y a salirse de la imagen.
<!doctype html>
<html>
<head>
<style>
.contenedor{
position: relative;
display: inline-block;
text-align: center;
}
.texto-encima{
position: absolute;
top: 10px;
left: 10px;
}
.centrado{
position: absolute;
top: calc(95% - 15px);
}>
</style>
</head>
<body>
<div class="contenedor">
<img src="img/uploads/probar-10p.jpg" />
<div class="texto-encima">arriba izq</div>
<div class="centrado">Centrado texto en el pie</div>
</div>
</body>
</html>