Как исправить вылезающий за пределы страницы текст при помощи overflow hidden?

Управление переполнением контента с overflow

Когда содержимое элемента больше, чем его размеры, текст вылезает за границы. Свойство overflow позволяет контролировать это поведение. Hidden — самый простой способ обрезать контент, но есть более изящные решения в зависимости от ситуации.

Базовое использование overflow: hidden

/* Обрезать контент со всех сторон */
.container {
  width: 300px;
  height: 100px;
  overflow: hidden;
  background: white;
  border: 1px solid #ccc;
}

<div class="container">
  Это очень длинный текст который не поместится в контейнер
  и будет обрезан полностью
</div>

Проблема: контент полностью скрыт, нет подсказки, что текста больше.

Обрезание одной строки текста

Для одной строки текста используй комбинацию свойств:

.single-line {
  white-space: nowrap;     /* Не переносить текст */
  overflow: hidden;        /* Обрезать если не поместится */
  text-overflow: ellipsis; /* Добавить многоточие ... */
}

<p class="single-line">
  Это очень длинный текст который не поместится
</p>

<!-- Результат: Это очень длинный текст кот... -->

Обрезание нескольких строк текста

Для нескольких строк используй -webkit-line-clamp (поддержка в большинстве браузеров):

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* Максимум 3 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="multi-line">
  Это очень длинный текст который распределяется
  по нескольким строкам. После третьей строки
  текст будет обрезан с многоточием.
</div>

Обрезание с полной поддержкой

.clamped-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;  /* Разбить длинные слова */
}

Использование в React компоненте

interface TextProps {
  lines?: number;
  children: string;
}

export function ClampedText({ lines = 1, children }: TextProps) {
  return (
    <div
      className="overflow-hidden text-ellipsis"
      style={{
        display: lines === 1 ? 'block' : '-webkit-box',
        WebkitLineClamp: lines,
        WebkitBoxOrient: 'vertical',
        whiteSpace: lines === 1 ? 'nowrap' : 'normal'
      }}
    >
      {children}
    </div>
  );
}

// Использование
<ClampedText lines={1}>Один очень длинный текст</ClampedText>
<ClampedText lines={3}>Три строки текста максимум...</ClampedText>

Tailwind CSS решение

<!-- Одна строка -->
<p class="truncate">Это очень длинный текст...</p>

<!-- Две строки (требует кастома) -->
<p class="line-clamp-2">Несколько строк текста...</p>

<!-- Три строки -->
<p class="line-clamp-3">Три строки максимум...</p>

Телаwind уже имеет встроенные классы line-clamp-1, line-clamp-2, line-clamp-3, etc.

Управление scrollbars

Если контент должен быть скроллируемым, используй overflow-y или overflow-x:

/* Вертикальный скролл */
.scrollable-vertical {
  height: 200px;
  overflow-y: auto;    /* Скроллируемый по Y */
  overflow-x: hidden;  /* Скрыть по X */
}

/* Горизонтальный скролл */
.scrollable-horizontal {
  width: 300px;
  overflow-x: auto;    /* Скроллируемый по X */
  overflow-y: hidden;  /* Скрыть по Y */
}

/* Оба скролла */
.scrollable {
  width: 300px;
  height: 200px;
  overflow: auto;      /* Скролл в обе стороны при необходимости */
}

Скрытие scrollbar при сохранении функциональности

/* Chrome, Safari и Edge */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Firefox */
.hide-scrollbar {
  scrollbar-width: none;
}

/* IE и Edge (старые версии) */
.hide-scrollbar {
  -ms-overflow-style: none;
}

Реальный пример: карточка продукта

export function ProductCard({
  title,
  description,
  price
}: Product) {
  return (
    <div className="bg-white rounded-lg shadow p-4 w-64">
      {/* Заголовок - одна строка */}
      <h3 className="font-bold text-lg truncate">
        {title}
      </h3>
      
      {/* Описание - две строки */}
      <p className="text-gray-600 text-sm line-clamp-2 mt-2">
        {description}
      </p>
      
      {/* Цена */}
      <p className="font-bold text-xl mt-4">
        {price}
      </p>
    </div>
  );
}

Сравнение подходов

Важные моменты

1. text-overflow работает только с overflow: hidden и обычно с white-space: nowrap
2. -webkit-line-clamp требует display: -webkit-box и -webkit-box-orient: vertical
3. Для мобильных устройств используй line-clamp, это более надёжно
4. Тестируй на разных браузерах — не все поддерживают webkit префиксы одинаково

Стиль CSS с fallback

.smart-truncate {
  /* Fallback для старых браузеров */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  /* Современный подход */
  @supports (-webkit-line-clamp: 2) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
}

Выбор подхода зависит от требований. Для одной строки используй text-overflow, для нескольких — -webkit-line-clamp с Tailwind классами line-clamp-N.