Как решить проблему обрезанного текста?

Решение проблемы обрезанного текста в веб-приложениях

Обрезание текста - частая проблема при адаптивном дизайне. Существует несколько подходов, в зависимости от контекста и требований дизайна.

CSS решения - однострочный текст

Способ 1: Ellipsis (три точки)

/* Для одной строки */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

<p class="truncate">Очень длинный текст, который будет обрезан с тремя точками в конце</p>

Способ 2: Скрытие переполнения

.truncate-overflow {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Количество строк */
  -webkit-box-orient: vertical;
}

Многострочное обрезание

Способ 1: -webkit-line-clamp (современный браузеры)

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Показать 2 строки максимум */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  line-height: 1.5;
  max-height: calc(1.5em * 2); /* Высота для 2 строк */
}

<div class="text-truncate-2">
  Это очень длинный текст, который будет отображаться максимум на двух строках, а остальное будет скрыто с многоточием в конце.
</div>

React компонент для обрезания текста

import React, { useState, useRef, useEffect } from 'react';

interface TextTruncateProps {
  text: string;
  maxLength?: number;
  lines?: number; // Количество строк для отображения
}

export function TextTruncate({ text, maxLength = 100, lines = 1 }: TextTruncateProps) {
  const [isTruncated, setIsTruncated] = useState(false);
  const [isExpanded, setIsExpanded] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (element && element.scrollHeight > element.clientHeight) {
      setIsTruncated(true);
    }
  }, [text]);

  if (isExpanded) {
    return (
      <div>
        <p>{text}</p>
        {isTruncated && (
          <button onClick={() => setIsExpanded(false)} className="text-blue-500 underline">
            Скрыть
          </button>
        )}
      </div>
    );
  }

  return (
    <div>
      <div
        ref={ref}
        className={`line-clamp-${lines}`}
      >
        {text}
      </div>
      {isTruncated && (
        <button onClick={() => setIsExpanded(true)} className="text-blue-500 underline">
          Читать далее
        </button>
      )}
    </div>
  );
}

// Использование
<TextTruncate text="Очень длинный текст..." lines={2} />

Tailwind CSS подход

// Одна строка
<p className="truncate">Очень длинный текст будет обрезан с ellipsis</p>

// Две строки (требует расширенной конфига)
<p className="line-clamp-2">Текст на две строки максимум</p>

// Динамическое количество строк
<div className="overflow-hidden text-ellipsis" style={{
  display: '-webkit-box',
  WebkitLineClamp: 3,
  WebkitBoxOrient: 'vertical'
}}>
  {longText}
</div>

Продвинутый подход: Обрезание с сохранением слов

function truncateText(text: string, maxLength: number, addEllipsis = true): string {
  if (text.length <= maxLength) return text;
  
  // Обрезаем по максимальной длине
  let truncated = text.substring(0, maxLength);
  
  // Находим последний пробел для сохранения целых слов
  const lastSpace = truncated.lastIndexOf(' ');
  if (lastSpace > 0) {
    truncated = truncated.substring(0, lastSpace);
  }
  
  return addEllipsis ? truncated + '...' : truncated;
}

// Использование
const text = "Это очень длинный текст, который нужно обрезать корректно";
console.log(truncateText(text, 20)); // "Это очень длинный...";

Когда использовать какой подход

1. white-space: nowrap + ellipsis - для заголовков и коротких строк
2. -webkit-line-clamp - для карточек и описаний (2-3 строки)
3. React компонент с expand - когда нужна интерактивность
4. JavaScript обрезание - для SEO и динамического контента

Важные замечания

• Всегда проверяйте поддержку браузеров для -webkit- свойств
• Убедитесь, что обрезанный текст остается читаемым
• Для доступности добавляйте title атрибут или tooltip
• Для SEO используйте JavaScript-обрезание на клиенте, не сокращайте на сервере