Fovway/NoteJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
NoteJS/TEXT_WRAPPING_FIX.md
Fovway 2869f901e6 🎨 Обновлены стили для переноса текста в заметках 
- Добавлены свойства переноса текста (word-wrap, overflow-wrap, word-break) для всех элементов заметок
- Исправлена проблема с длинным текстом без пробелов, который выходил за границы блока
- Обновлены стили для улучшения читаемости текста в различных элементах
2025-10-19 22:39:07 +07:00

2.3 KiB
Raw Blame History

Исправление переноса длинного текста в заметках

Проблема

Когда заметка содержала длинный текст без пробелов (например, "fdsfsdsfsdfsd..."), текст выходил за границы блока вместо того, чтобы переноситься на новую строку.

Решение

Добавлены свойства CSS для правильного переноса текста во всех элементах, связанных с отображением заметок:

Основные свойства переноса текста:

  • word-wrap: break-word - старое свойство для совместимости
  • overflow-wrap: break-word - современное свойство
  • word-break: break-word - для разрыва слов без пробелов

Измененные элементы CSS:

  1. .container - основной контейнер заметок
  2. .textNote - основной элемент текста заметки
  3. .textNote p - абзацы в заметках
  4. .textNote h1-h6 - заголовки в заметках
  5. .textNote ul, .textNote ol - списки
  6. .textNote li - элементы списков
  7. .textNote a - ссылки
  8. .textNote blockquote - цитаты
  9. .textNote pre - блоки кода
  10. .textNote code - встроенный код
  11. .textNote .tag-in-note - теги в заметках
  12. .notes-container - контейнер всех заметок

Дополнительные улучшения:

  • Добавлен box-sizing: border-box для контейнера
  • Добавлен overflow: hidden для контейнера для предотвращения горизонтального скролла

Результаты

  • Длинный текст теперь корректно переносится на следующую строку
  • Работает как на десктопной, так и на мобильной версии
  • Сохранена красота и читаемость заметок

Файлы, измененные

  • /public/style.css - добавлены стили переноса текста