Как работает nowrap?

Как работает white-space: nowrap

Это свойство CSS контролирует как браузер обрабатывает пробелы и переносы строк в тексте. Расскажу в деталях.

1. Основная функция

.text {
  white-space: nowrap;
}

Это свойство делает несколько вещей:

const nowrapBehavior = {
  // Запрещает перенос текста на новую строку
  text_wrapping: "disabled",
  
  // Свойства пробелов
  whitespace_handling: "один пробел вместо нескольких",
  newlines: "игнорируются",
  line_break: "запрещены",
  
  // Результат
  result: "весь текст в одну строку, может переполнить контейнер"
};

2. Сравнение со всеми значениями white-space

/* white-space имеет несколько значений */

.wrap {
  white-space: normal;      /* default - переносит текст */
}

.nowrap {
  white-space: nowrap;      /* в одну строку, может переполнить */
}

.pre {
  white-space: pre;         /* как в <pre> - сохраняет пробелы и переносы */
}

.pre-wrap {
  white-space: pre-wrap;    /* сохраняет пробелы и переносит текст */
}

.pre-line {
  white-space: pre-line;    /* сохраняет переносы, но не пробелы */
}

.break-spaces {
  white-space: break-spaces;/* как pre-wrap, но сохраняет пробелы в конце */
}

Таблица для наглядности:

| Значение    | Пробелы | Переносы | Перенос строк |
|-------------|---------|----------|---------------|
| normal      | collapse| collapse | wrap          |
| nowrap      | collapse| collapse | NO WRAP       |
| pre         | preserve| preserve | preserve      |
| pre-wrap    | preserve| preserve | wrap          |
| pre-line    | collapse| collapse | preserve      |
| break-spaces| preserve| preserve | wrap          |

3. Практические примеры

// Пример 1: Текст с множественными пробелами
const html = `
  <div class="nowrap">
    Это    текст    с    множественными     пробелами
  </div>
`;

// white-space: normal
// Результат: "Это текст с множественными пробелами" (пробелы коллапсятся)

// white-space: nowrap
// Результат: "Это    текст    с    множественными     пробелами" (пробелы сохраняются, но в одну строку)

4. HTML код

<!-- Пример текста со скрытыми символами переноса строки -->
<div class="nowrap">
  Это первая строка
  Это вторая строка
</div>

<!-- white-space: normal -->
<!-- Результат: Текст перенесётся на новую строку -->

<!-- white-space: nowrap -->
<!-- Результат: Это первая строка Это вторая строка (в одну строку) -->

5. Использование с overflow

nowrap часто используется вместе с overflow для обрезания текста:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* ... в конце -->
}

// HTML
<p class="truncate">Очень длинный текст который не поместится</p>

// Результат: "Очень длинный текст который не..."

6. React компонент

export function TruncatedText({ text, className = "" }) {
  return (
    <div className={cn(
      "white-space-nowrap overflow-hidden text-overflow-ellipsis",
      className
    )}>
      {text}
    </div>
  );
}

// Tailwind версия
export function TruncatedTextTailwind({ text }) {
  return (
    <div className="truncate">  {/* Tailwind класс с nowrap + overflow */}
      {text}
    </div>
  );
}

7. Когда использовать nowrap

const useCases = {
  // 1. Обрезание длинного текста
  "файл.очень.длинное.имя.документа.pdf": {
    approach: "nowrap + overflow-hidden + text-overflow-ellipsis",
    result: "файл.очень.длинное..." 
  },
  
  // 2. Номера телефонов/кредитных карт
  "+7 (999) 123-45-67": {
    approach: "nowrap чтобы номер не разбился по строкам",
    important: true
  },
  
  // 3. Ценники в таблице
  "$99.99": {
    approach: "nowrap чтобы знак валюты не отделялся",
    important: true
  },
  
  // 4. Меню навигации
  "Home Products About Contact": {
    approach: "nowrap чтобы меню было в одну строку на узких экранах",
    note: "иногда"
  }
};

8. Проблемы и решения

/* Проблема: текст переполняет контейнер */
.broken {
  white-space: nowrap;
  width: 200px;  /* Текст вылезет за границы */
}

/* Решение 1: Обрезание */
.solution-1 {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Решение 2: Горизонтальная прокрутка */
.solution-2 {
  white-space: nowrap;
  width: 200px;
  overflow-x: auto;
}

/* Решение 3: Уменьшение шрифта */
.solution-3 {
  white-space: nowrap;
  width: 200px;
  font-size: 0.85rem;  /* Текст может поместиться */
}

9. JavaScript проверка

function getWhiteSpaceValue(element) {
  const computed = window.getComputedStyle(element);
  return computed.whiteSpace;  // "nowrap", "normal", и т.д.
}

const element = document.querySelector('.text');
console.log(getWhiteSpaceValue(element));  // "nowrap"

10. Tailwind CSS

В современных проектах используют Tailwind:

<!-- Классы для nowrap -->
<div class="truncate">Длинный текст...</div>
<!-- Это эквивалент: white-space: nowrap + overflow: hidden + text-overflow: ellipsis -->

<!-- Если нужен просто nowrap без обрезания -->
<div class="whitespace-nowrap overflow-x-auto">Текст</div>

<!-- Другие варианты -->
<div class="whitespace-normal">Стандартный перенос</div>
<div class="whitespace-pre">Сохранять пробелы</div>
<div class="whitespace-pre-wrap">Пробелы + перенос</div>
<div class="whitespace-pre-line">Переносы + коллапс пробелов</div>

Частые ошибки

/* ❌ Неправильно - текст вылезет за границы */
.broken {
  white-space: nowrap;
  width: 200px;
}

/* ✅ Правильно - текст обрезан */
.fixed {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ❌ Неправильно - забыли overflow */
.half-fixed {
  white-space: nowrap;
  text-overflow: ellipsis;  /* Не работает без overflow: hidden */
}

Итого

white-space: nowrap - это просто свойство CSS которое говорит браузеру: "Не переноси этот текст на новую строку". Часто комбинируется с overflow: hidden и text-overflow: ellipsis для обрезания длинного текста с многоточием.

Это очень распространённый паттерн в веб-дизайне, используется везде - от названий файлов до таблиц с данными.