Можно ли настроить высоту заголовков в карточках в зависимости от количества строк текста?

Да, можно настроить высоту заголовков в карточках таким образом, чтобы они соответствовали высоте самого длинного заголовка в ряду. Это можно реализовать с помощью CSS и JavaScript. Вот один из подходов:

### CSS

Во-первых, задайте базовые стили для заголовков карточек:

```css
.card {
    display: flex;
    flex-direction: column;
    margin: 10px;
}

.card-header {
    /* Убедитесь, что заголовок занимает всю ширину карточки */
    width: 100%;
    overflow: hidden; /* Скрыть переполнение */
    text-overflow: ellipsis; /* Добавить многоточие для длинного текста */
    white-space: normal; /* Позволить многострочный текст */
}
```

### JavaScript

Теперь, чтобы добиться желаемого поведения, вам потребуется JavaScript для вычисления высоты заголовков и установки ее для всех заголовков в одном ряду:

```javascript
window.onload = function() {
    const rows = document.querySelectorAll('.card-row'); // Предположим, что карточки сгруппированы в строки

    rows.forEach(row => {
        let maxHeight = 0; // Переменная для хранения максимальной высоты

        // Сначала находим максимальную высоту
        const headers = row.querySelectorAll('.card-header');
        headers.forEach(header => {
            const height = header.scrollHeight; // Высота заголовка
            if (height > maxHeight) {
                maxHeight = height;
            }
        });

        // Устанавливаем максимальную высоту для каждого заголовка
        headers.forEach(header => {
            header.style.height = `${maxHeight}px`;
        });
    });
};
```

### HTML

Вот пример HTML-структуры с карточками:

```html
<div class="card-row">
    <div class="card">
        <div class="card-header">Краткий заголовок</div>
        <div class="card-content">Содержимое карточки 1</div>
    </div>
    <div class="card">
        <div class="card-header">Заголовок, который будет длиннее и займёт больше места</div>
        <div class="card-content">Содержимое карточки 2</div>
    </div>
    <div class="card">
        <div class="card-header">Ещё один заголовок</div>
        <div class="card-content">Содержимое карточки 3</div>
    </div>
</div>
```

### Примечания

1. Убедитесь, что у вас правильная структура HTML с классами, соответствующими выборкам в JavaScript.
2. Этот подход работает на загрузке страницы, но если динамически добавляются карточки, то нужно будет вызывать эту функцию повторно (например, по событию добавления новой карточки).
3. Если вы хотите, чтобы высота заголовков автоматически обновлялась при изменении размера окна, можете обернуть код в обработчик события `resize`.

Да, это возможно сделать с помощью CSS и JavaScript. Основная идея заключается в том, чтобы динамически вычислять высоту самого высокого заголовка в ряду и применять эту высоту ко всем заголовкам в этом ряду. <br/> <br/> Допустим так <br/> Вот HTML <br/> <br/> <pre><code class="html">&lt;div class="card-row"&gt;
    &lt;div class="card"&gt;
        &lt;h3 class="card-title"&gt;Однострочный заголовок&lt;/h3&gt;
        &lt;p&gt;Описание карточки&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
        &lt;h3 class="card-title"&gt;Многострочный заголовок, который занимает больше места&lt;/h3&gt;
        &lt;p&gt;Описание карточки&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
        &lt;h3 class="card-title"&gt;Ещё один однострочный заголовок&lt;/h3&gt;
        &lt;p&gt;Описание карточки&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre> <br/> <br/> Вот CSS <br/> <pre><code class="css">.card-row {
    display: flex;
    gap: 16px; /* Отступ между карточками */
}

.card {
    border: 1px solid #ccc;
    padding: 16px;
    flex: 1;
}

.card-title {
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.5;
}</code></pre> <br/> <br/> Вот JS <br/> <pre><code class="javascript">function adjustCardTitlesHeight() {
    const rows = document.querySelectorAll('.card-row');

    rows.forEach(row =&gt; {
        const titles = row.querySelectorAll('.card-title'); 
        let maxHeight = 0;

        titles.forEach(title =&gt; {
            title.style.height = 'auto';
            const titleHeight = title.offsetHeight;
            if (titleHeight &gt; maxHeight) {
                maxHeight = titleHeight;
            }
        });

        titles.forEach(title =&gt; {
            title.style.height = `${maxHeight}px`;
        });
    });
}
window.addEventListener('load', adjustCardTitlesHeight);
window.addEventListener('resize', adjustCardTitlesHeight);</code></pre>