<body>
<header>
<!-- Ваш хедер -->
</header>
<main>
<!-- Основной контент страницы -->
</main>
<footer>
<!-- Ваш футер -->
</footer>
</body>*, *::before, *::after {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
body {
flex: 1; /* Расширяет основной контент на все доступное пространство */
}
header, footer {
flex-shrink: 0; /* Предотвращает сжатие хедера и футера */
}const block = document.getElementById('your-block-id'); // Замените 'your-block-id' на актуальный идентификатор вашего блока
if (block.scrollWidth > block.offsetWidth) {
// Текст обрезается и появляется троеточие
// В этом случае вы можете добавить обработчик события наведения мыши, чтобы показать тултип
block.addEventListener('mouseenter', showTooltip);
block.addEventListener('mouseleave', hideTooltip);
} else {
// Текст полностью умещается в блоке
// В этом случае вы можете удалить обработчики событий или не отображать тултип вообще
block.removeEventListener('mouseenter', showTooltip);
block.removeEventListener('mouseleave', hideTooltip);
}
function showTooltip() {
// Код для показа тултипа
}
function hideTooltip() {
// Код для скрытия тултипа
}@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url(fonts/roboto_condensed/RobotoCondensed-Regular.ttf) format('truetype')
}export default function CheckBox() {
const [isChecked, setIsChecked] = useState(false);
const handleChange = () => {
setIsChecked(!isChecked);
};
return (
<div className='todo-item__container-field'>
<input
className='todo-item__checkbox'
type='checkbox'
name='checkbox'
checked={isChecked}
onChange={handleChange}
/>
<span className='todo-item__span'></span>
</div>
);
}