Как сделать чтобы текст рос вверх?

Question

[Markiv07]

Есть вот такая карточка, и заголовок test post в плотную к полю Автор, но если добавиться пару слов то заголовок перепрыгнет и будет перекрывать поле автор. Как сделать так чтобы текст при переходе на новую строку рос вверх а не в низ?



вот код

<Card style={{position: "relative"}}>
                            <CardActionArea>
                            <Link to={"/publication/"+post._id}>
                                <CardMedia component={"img"} image={post.img} height={"394"} width={"415"} alt="image" style={{objectFit: "cover", filter: "brightness(60%)"}}
                                />
                            <h4 style={{position: "absolute", top: "75%", fontSize: "32px", marginLeft: "15px", marginRight: "15px"}}>{post.title}</h4>
                            </Link>
                            <h6 style={{position: "absolute", top: "85%", fontSize: "14px", marginLeft: "15px", marginRight: "15px"}}>Автор: {author.username}</h6>
                            <h6 style={{position: "absolute", top: "90%", fontSize: "14px", marginLeft: "15px", marginRight: "15px"}}>{handleCategory(post.category)}</h6>
                                </CardActionArea>
                        </Card>

Comments

[Александр Талалаев]

Такой код не катит, выложи кусок этот рабочий на Codepen/Jsfiddle
PS а разгадка вопроса кроется что absolute нужно использовать в крайних случаях. В вашей ситуации можно сделать просто на flex

Answer 1

[Александр Талалаев]

Короче, забудь про абсолюты как про страшный сон. Очень редко, только когда другое ну никак нельзя.
Сделать можно разными способами, например на флексах

Comments

[Антон Литвиненко]

подскажите, как без страшного сна сделать когда используется контентная картинка тегом img? Собственно как в вопросе

[Froggyweb]

картинка фоном для контентного изображения... фу....

[Александр Талалаев]

Froggyweb, не фу, а ок — это же просто пример для другой части вёрстки. Но вы правы, что я не задумался зачем так автор вопроса мучался. Спасибо за указание
Антон Литвиненко тут можно блок с текстом вывести в оверлей. Обновил пример

Answer 2

[cssfish]

если absolute, то прижимаем его к низу bottom- и он будет расти вверх.
а если flex то flex-end