Элемент
должен принимать ширину
Есть <h4> и <p>. В <h4> записывается имя и фамилия, поэтому в каждой карточке ширина разная. При этом, <р> должен принимать ширину <h4> (на чистом JS, если на CSS невозможно). UPD: В коде не указано, но они стоят в абсолюте и выходят частично за карту, поэтому на ширину карты они не влияют UPD2: "Вы хотите, чтобы текст в p доходил только до уровня текста в h4, а потом переносился на новую строку?" - да
//js который смог найти но не работает у меня
$(window).resize(function() {
var d1 = $(".master-name").css("width");
$(".master-prof").css("width", d1);
console.log(d1);
});.index-masters__hole__master h4 {
@apply text-pampas;
border-radius: 20px 0;
padding: 12px 20px;
background: #230000;
width: fit-content;
font-family: Alice;
font-size: 32px;
font-weight: 400;
line-height: 37px;
letter-spacing: 0em;
}
.index-masters__hole__master p {
@apply text-hemp;
background: #EBE4DE;
border-radius: 20px 0px;
padding: 24px 34px;
font-family: Rubik;
font-size: 16px;
font-weight: 400;
line-height: 19px;
letter-spacing: 0em;
}<a href="#" class="index-masters__hole__master">
<h4 class="master-name">Иванов Иван</h4>
<p class="master-prof">Парикмахер-стилист</p>
</a>Ответы (2 шт):
Автор решения: Иван Ипатов
→ Ссылка
Справочная информация по inline-block
Справочная информация по window.getComputedStyle()
const max = parseInt(window.getComputedStyle(document.querySelector(".master-name")).width) // получаем ширину h4
document.querySelector(".master-prof").style.width = `${max - 28}px` // выставляем такую ширину p, но вычитаем 28px из-за разных значений padding.master-name {
display: inline-block;
}
.index-masters__hole__master h4 {
@apply text-pampas;
border-radius: 20px 0;
padding: 12px 20px;
background: #230000;
font-family: Alice;
font-size: 32px;
font-weight: 400;
line-height: 37px;
letter-spacing: 0em;
}
.index-masters__hole__master p {
@apply text-hemp;
background: #ebe4de;
border-radius: 20px 0px;
padding: 24px 34px;
font-family: Rubik;
font-size: 16px;
font-weight: 400;
line-height: 19px;
letter-spacing: 0em;
}<a href="#" class="index-masters__hole__master">
<h4 class="master-name">Иванов Иван</h4>
<p class="master-prof">Парикмахер-стилист lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
</a>
Автор решения: puffleeck
→ Ссылка
для этих целей даже CSS не сильно нужен
<p> по умолчанию блочный элемент, по сему растягивается до ширины родителя.
<h4 style='background: green; width: 100px'>
Вася Пупкин
<p style='background: gray;'>дочерний P.
при нулевых margin & padding ширина этого блока будет равна ширине h4</p>
</h4>