Проблема:
Мой макет выглядит следующим образом, когда текст состоит из 1 строки, он будет go вверх, и мне нужно исправить в той же позиции. Как мы это делаем?
Простое решение - создать функцию и найти максимальную высоту текста. Вам также нужно будет создать окно прослушивания изменения размера и вызвать функцию для регулировки высоты.
$(function() { let adjustElementHeight = () => { // Fix the initial of the resize Array.from($(".js__selector")).forEach((x) => { x.style.height = 'initial'; }); // Store height inside array const titleHeights = Array.from($(".js__selector")) .map(x => x.getBoundingClientRect().height); // Find the bigest const maxHeight = titleHeights.reduce((prev, curr) => { return curr > prev ? curr : prev; }, 0); // Adjust the size Array.from($(".js__selector")) .forEach((x) => x.style.height = `${maxHeight}px`); } // call the function on load adjustElementHeight(); // Listen the reize $(window).resize(() => { adjustElementHeight(); }); });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container mt-5"> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title js__selector">Card title Bigest than the right one</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title js__selector">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div>
Я предполагаю, что у вас есть текст в любом погружении. Допустим, у вас есть вот так
<div class="milageDiv">{{data.milage}}</div>
Итак, в вашем css добавьте это свойство white-space: nowrap;
css
white-space: nowrap;
.milageDiv { white-space: nowrap; }