Содержание

Текст. Утилиты · Bootstrap. Версия v4.5.3

Документация и примеры для обычных текстовых утилит для управления выравниванием, обертыванием, весом и многим другим.

Выравнивание текста

Выравнивайте текст в соответствии с обновляющимся выравниванием компонентов с помощью классов выравнивания.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<p>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.  Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Выровненный слева текст для всех размеров видовых экранов.

Выровненный по центру текст для всех размеров видовых экранов.

Выровненный справа текст во всех размерах видового экрана.

Выровненный слева текст для экрана размера SM (small) или более широкого.

Выровненный слева текст для экрана размера MD (medium) или более широкого.

Выровненный слева текст для экрана размера LG (large) или более широкого.

Выровненный слева текст для экрана размера XL (extra-large) или более широкого.

<p>Выровненный слева текст для всех размеров видовых экранов.</p>
<p>Выровненный по центру текст для всех размеров видовых экранов. </p>
<p>Выровненный справа текст во всех размерах видового экрана.</p>

<p>Выровненный слева текст для экрана размера SM (small) или более широкого.</p>
<p>Выровненный слева текст для экрана размера MD (medium) или более широкого.</p>
<p>Выровненный слева текст для экрана размера LG (large) или более широкого.</p>
<p>Выровненный слева текст для экрана размера XL (extra-large) или более широкого.</p>

Перенос текста и переполнение

Обтекание текста классом .text-wrap.

This text should wrap.

<div>
  This text should wrap.
</div>

Предотвращайте оборачивание текста с помощью класса .text-nowrap.

Этот текст должен выходить за текст родительского элемента.

<div>
  Этот текст должен выходить за текст родительского элемента.
</div>

Для более длинного контента вы можете добавить класс .text-truncate для усечения текста используя эллипсис, т.е. многоточие («…»). Требует display: inline-block или display: block.

Praeterea iter est quasdam res quas ex communi.

Praeterea iter est quasdam res quas ex communi.

<!-- Block level -->
<div>
  <div>
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span>
  Praeterea iter est quasdam res quas ex communi.
</span>

Разрыв слов

Чтобы длинные строки текста не нарушали компоновку компонентов, используйте .text-break для установки word-wrap: break-word и word-break: break-word. Мы используем word-wrap перенос по словам вместо более распространенного overflow-wrap переноса через переполнение для более широкой поддержки браузеров и добавляем устаревшее word-break: break-word, чтобы избежать проблем с гибкими контейнерами.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Трансформация текста

Трансформируйте текст в компонентах с помощью классов заглавных букв.

Текст в нижнем регистре.

Текст в верхнем регистре.

разноРеГиСТровый текст.

<p>Текст в нижнем регистре.</p>
<p>Текст в верхнем регистре.</p>
<p>разноРеГиСТровый текст.</p>

Заметьте, что text-capitalize меняет лишь первую букву каждого слова, оставляя регистр других неизменным.

Толщина текста и курсив

Изменяйте толщину и курсивность текста.

Жирный текст.

Жирный текст (относительно родительского элемента).

Нормальная толщина текста.

Легкий текст.

Легкий текст (относительно родительского элемента).

Курсивный текст.

<p>Жирный текст.</p>
<p>Жирный текст (относительно родительского элемента).</p>
<p>Нормальная толщина текста.</p>
<p>Легкий текст.</p>
<p>Легкий текст (относительно родительского элемента).</p>
<p>Курсивный текст.</p>

Моноширинный текст

(ширина каждого символа одинакова)

Измените выделение на наш моноширинный стек с помощью .text-monospace.

Это моноширинный текст

<p>Это моноширинный текст</p>

Сброс цветов

Сбросьте цвет текста или ссылки с помощью .text-reset для наследования цвета от своего родителя. Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

Muted text with a reset link.

<p>
  Muted text with a <a href="#">reset link</a>.
</p>

Текстовое оформление

Удалите текстовое оформление с помощью класса .text-decoration-none.

Non-underlined link

<a href="#">Non-underlined link</a>
Please enable JavaScript to view the comments powered by Disqus.

Компоновка и перенос текста в Adobe InDesign

  1. Руководство пользователя InDesign
  2. Основы работы с InDesign
    1. Введение в InDesign
      1. Новые возможности InDesign
      2. Системные требования
      3. Общие вопросы
      4. Использование библиотек Creative Cloud
    2. Рабочая среда
      1. Основные сведения о рабочей среде
      2. Панель инструментов
      3. Установка параметров
      4. Рабочая среда «Сенсорное управление»
      5. Комбинации клавиш по умолчанию
      6. Восстановление документа и отмена
  3. Создание документов и макетов
    1. Документы и страницы
      1. Создание документов
      2. Работа со страницами-шаблонами
      3. Работа с несколькими документами
      4. Задайте размер страницы, поля или области выпуска
      5. Работа с файлами и шаблонами
      6. Создание файлов книг
      7. Добавление основной нумерации страниц
      8. Нумерация страниц, глав и разделов
      9. Преобразование документов QuarkXPress и PageMaker
      10. Совместное использование содержимого
      11. Основные рабочие процессы с управляемыми файлами
      12. Сохранение документов
    2. Сетки
      1. Сетки
      2. Форматирование сеток
    3. Средства создания макетов
      1. Линейки
  4. Добавить содержимое
    1. Текст
      1. Добавление текста к фреймам
      2. Связывание текстовых блоков
      3. Возможности для арабского языка и иврита в InDesign
      4. Создание текста по контуру
      5. Маркеры и нумерация
      6. Глифы и специальные символы
      7. Компоновка текста
      8. Текстовые переменные
      9. Создание QR-кодов
      10. Редактирование текста
      11. Выравнивание текста
      12. Обтекание текста вокруг объектов
      13. Привязанные объекты
      14. Связанное содержимое
      15. Форматирование абзацев
      16. Форматирование символов
      17. Найти/заменить
      18. Проверка орфографии и языковые словари
    2. Типографика
      1. Использование шрифтов в InDesign
      2. Кернинг и трекинг
    3. Форматирование текста
      1. Форматирование текста
      2. Работа с пакетами стилей
      3. Табуляторы и отступы
    4. Рецензирование текста
      1. Отслеживание и просмотр изменений
      2. Добавление редакционных примечаний в InDesign
      3. Импорт комментариев файла PDF
    5. Добавление ссылок
      1. Создание оглавления
      2. Сноски
      3. Создание указателя
      4. Концевые сноски
      5. Подписи
    6. Стили
      1. Стили абзацев и символов
      2. Сопоставление, экспорт и организация стилей
      3. Стили объектов
      4. Буквицы и вложенные стили
      5. Работа со стилями
      6. Интерлиньяж
    7. Таблицы
      1. Форматирование таблиц
      2. Создание таблиц
      3. Стили таблиц и ячеек
      4. Выделение и редактирование таблиц
      5. Обводка и заливка таблиц
    8. Интерактивные функции
      1. Гиперссылки
      2. Динамические документы PDF
      3. Закладки
      4. Кнопки
      5. Формы
      6. Анимация
      7. Перекрестные ссылки
      8. Структурирование документов PDF
      9. Переходы страниц
      10. Аудио и видео
    9. Графические объекты
      1. Знакомство с контурами и фигурами
      2. Рисование с помощью инструмента «Карандаш»
      3. Рисование с помощью инструмента «Перо»
      4. Применение параметров линии (штриха) 
      5. Составные контуры и фигуры
      6. Редактирование контуров
      7. Обтравочные контуры
      8. Изменение параметров угла
      9. Выравнивание и распределение объектов
      10. Связанные и встроенные графические объекты
      11. Интеграция ресурсов AEM
    10. Цвет и прозрачность
      1. Применение цвета
      2. Использование цветов из импортированной графики
      3. Работа с цветовыми образцами
      4. Смешение красок
      5. Оттенки
      6. Знакомство с плашечными и триадными цветами
      7. Наложение цветов
      8. Градиенты
      9. Сведение прозрачного графического объекта
      10. Добавление эффектов прозрачности
  5. Общий доступ
    1. Работа с облачными документами InDesign
    2. Облачные документы в InDesign | Часто задаваемые вопросы
    3. Общий доступ и совместная работа        
    4. Отправка на редактирование
    5. Проверка опубликованного документа InDesign
    6. Управление отзывами 
  6. Публикация
    1. Размещение, экспорт и публикация
      1. Публикация в Интернете
      2. Копирование и вставка графических объектов
      3. Экспорт содержимого в формат EPUB
      4. Параметры Adobe PDF
      5. Экспорт содержимого в формат HTML
      6. Экспорт в формат Adobe PDF
      7. Экспорт в формат JPEG
      8. Экспорт в HTML
      9. Обзор DPS и AEM Mobile
      10. Поддерживаемые форматы файлов
    2. Печать
      1. Печать брошюр
      2. Метки и выпуск за обрез
      3. Печать документов
      4. Краски, цветоделенные формы и линиатура растра
      5. Наложение
      6. Создание PostScript и EPS-файлов
      7. Предпечатная проверка файлов перед отправкой
      8. Печать миниатюр или документов большого формата
      9. Подготовка файлов PDF для поставщиков услуг
      10. Подготовка к печати цветоделенных форм
  7. Расширение InDesign
    1. Автоматизация
      1. Объединение данных
      2. Плагины
      3. Расширение Capture в InDesign
      4. Разработка сценариев
  8. Устранение неполадок
    1. Исправленные ошибки
    2. Аварийное завершение работы при запуске
    3. Ошибка папки настроек: только для чтения
    4. Поиск и устранение проблем с файлами
    5. Невозможно экспортировать в PDF
    6. Восстановление документов InDesign

Компоновка текста

Внешний вид текста на странице определяется сложным взаимодействием процессов, называемым компоновкой. InDesign компонует текст на основе заданных межсловных и межсимвольных интервалов, масштаба глифов и параметров расстановки переносов, стараясь подобрать наиболее оптимальное соответствие заданным параметрам.

InDesign поддерживает два метода компоновки: компоновщик абзацев Adobe (по умолчанию) и однострочный компоновщик Adobe. Оба метода доступны через меню панели «Управление». Применяемый компоновщик выбирается в меню палитры «Абзац», в диалоговом окне «Выключка» или на панели «Управление».

InDesign поддерживает четыре метода компоновки для работы с текстом, в том числе построчный компоновщик японского текста Adobe, компоновщик абзацев японского текста Adobe, компоновщик абзацев Adobe и построчный компоновщик Adobe. Каждый компоновщик оценивает возможные разрывы в японском или латинском тексте и выбирает те, которые лучше всего поддерживают параметры расстановки переносов и выключки, заданные для данного абзаца. Компоновщик абзацев японского текста Adobe выбран по умолчанию. Дополнительные сведения об этих параметрах см. в справке InDesign.

Методы компоновки

InDesign поддерживает два метода компоновки: компоновщик абзацев Adobe (по умолчанию) и однострочный компоновщик Adobe. Оба метода оценивают для абзаца все возможные переносы, а затем выбирают оптимальное соотношение переносов и выравнивания.

Компоновщик абзацев Adobe

Рассматривает все варианты переносов для абзаца и поэтому может оптимизировать последующие строки, позволяя исключить нежелательные переносы в них. Компоновка абзаца приводит к более равномерному размещению текста с меньшим числом переносов.

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

Примечание.

Соотношение величины интервалов и числа переносов определяется в диалоговом окне «Переносы». См. раздел Расстановка переносов.

Построчный компоновщик Adobe

Предлагает традиционный подход к компоновке текста по одной строке за один раз. Этот вариант может оказаться полезным в том случае, если необходимо ограничить изменения компоновки для последующих этапов редактирования.

Выбор метода компоновки для абзаца

  1. Выполните одно из следующих действий:

    • В меню палитры «Абзац» выберите компоновщик абзацев Adobe (по умолчанию) или построчный компоновщик Adobe.

    • В меню палитры «Абзац» или панели «Управление» выберите «Выключка», а затем выберите один из параметров в меню «Компоновщик».

Примечание.

Наряду с интерфейсом, который позволяет настраивать параметры ядра, можно использовать дополнительные сторонние компоновщики.

Настройка установок компоновки

  1. Выберите Редактирование > Установки > Компоновка (для Windows) или InDesign > Установки > Компоновка (для macOS).

  2. Чтобы использовать экранное выделение для выявления проблем с компоновкой, выберите «Нарушение условий удержания», «Ошибки переносов и выключки» (расстановка переносов и выключка), «Заказной кернинг/трекинг», «Подставленные шрифты» и «Подставленные глифы».

  3. В разделе «Параметры обтекания текстом» выберите «Выключать текст по границам объектов», «Выравнивать текст по интерлиньяжу», «Не применять к тексту, расположенному поверх объектов» и «Учитывать отступы в тексте помимо обтекания текстом».

  4. В режимах совместимости модзикуми выберите параметр «Использовать новый масштаб по вертикали» или «Использовать модзикуми на основе CID».

  5. Нажмите кнопку «ОК».

Перенос текста

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

Выключкой управляет выбранный режим выравнивания, межсловные и межбуквенные интервалы, а также масштаб глифов. Допускается также выключка одиночных слов в узких столбцах текста с выключкой по ширине.

Настройка переносов вручную

Слова можно переносить по слогам вручную или автоматически либо сочетанием этих методов. Наиболее безопасным способом ручной расстановки переносов является вставка дискреционного переноса, который не отображается до тех пор, пока не будет выполнен перенос части слова на следующую строку. Помещение дискреционного переноса в начало слова препятствует его переносу по слогам.

  1. При помощи инструмента «Текст»  щелкните в том месте, где необходимо вставить перенос.

  2. Выполните одно из следующих действий:

    • Выберите «Текст» > «Вставить специальный символ» > «Другой» > «Дефисы и тире» > «Дискреционный перенос».

    • Можно также нажать комбинацию клавиш Ctrl + Shift + «-» (Windows) или Command + Shift + «-» (Mac OS).

Примечание.

Вставка в слово дискреционного переноса не гарантирует, что это слово обязательно будет перенесено. Это зависит и от других параметров переноса и компоновки. Однако дискреционный перенос гарантирует, что слово будет перенесено только в месте установки переноса.

Настройка автоматической расстановки переносов

Перенос по слогам выполняется в соответствии со списком слов, который находится либо в отдельном файле пользовательского словаря, либо в самом документе. Чтобы гарантировать единообразие в расстановке переносов, возможно, потребуется задать ссылку на определенный список слов, особенно если документ планируется передавать поставщику услуг либо с файлом работают несколько сотрудников.

Настройка параметров автоматической расстановки переносов для абзаца

Если включена автоматическая расстановка переносов, то можно задать соотношение величины интервалов с числом переносов. Можно также запретить перенос слов, состоящих из заглавных букв и последнего слова в абзаце.

  1. Щелкните абзац или выделите несколько абзацев, к которым необходимо применить это изменение.

  2. Выберите пункт «Переносы» в меню палитры «Абзац».

  3. Выберите параметр «Переносы».

  4. При необходимости измените следующие параметры, а затем нажмите кнопку «ОК»:

    В словах длиной не менее _ букв

    Указывает минимальное число символов в переносимых словах.

    После первых _ букв и перед последними _ буквами

    Указывает минимальное число символов в начале и в конце слова, которые могут быть перенесены. Например, если для обоих этих параметров задать значение 3, то слово минимально может быть перенесено как мини- мально, но не как ми- нимально и не как минималь- но.

    Подряд не более _ переносов

    Указывает максимальное число переносов, которые могут быть выполнены в смежных строках. Значение 0 означает, что число таких строк не ограничено.

    Зона переноса

    Указывает величину пробела, допустимого в конце строки невыключенного текста, при превышении которого начинается разбивка на переносы. Этот параметр применяется только при работе однострочного компоновщика с невыключенным текстом.

    Лучшие интервалы / Меньше переносов

    Соотношение между этими параметрами изменяется при перемещении ползунка в нижней части диалогового окна.

    Переносить слова, набранные заглавными буквами (InDesign)

    Чтобы предотвратить перенос слов, набранных прописными буквами, отмените выбор этого параметра.

    В последнем слове абзаца

    Чтобы последнее слово в абзаце не переносилось, отмените выбор этого параметра.

    Переносить слова во всей колонке

    Чтобы слова в столбце, фрейме или странице не переносились, отмените выбор этого параметра.

Выключение переносов

Чтобы отключить автоматическую расстановку переносов для абзаца, выполните одно из следующих действий:

  1. Отмените выбор пункта «Переносы» в меню палитры «Абзац».

  2. Выберите Переносы в меню палитры «Абзац» или меню панели «Управление» и отмените выбор пункта Переносы в диалоговом окне «Настройки переносов».

    Примечание.

    Вы также можете отключить переносы в стиле абзаца.

Предотвращение нежелательного переноса слов

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

Предотвращение переноса в тексте

  1. Выделите текст, который необходимо разместить на одной строке.

  2. Выберите в меню палитры «Символ» или панели «Управление» пункт «Без переносов».

Примечание.

Другой способ предотвратить перенос слов — разместить в начале слова дискреционный перенос. Можно также нажать комбинацию клавиш Ctrl + Shift + «-» (Windows) или Command + Shift + «-» (Mac OS).

Создание неразделяемого дефиса

  1. При помощи инструмента «Текст»  щелкните в том месте, где необходимо вставить перенос.

  2. Выберите «Текст» > «Вставить специальный символ» > «Штрихи и переносы» > «Неразделяемый дефис».

Создание неразрывного пробела

  1. При помощи инструмента «Текст»  щелкните там, где необходимо вставить такой пробел.

  2. Выберите «Текст» > «Вставить пробел» > «Неразрывный пробел» (или любой другой пробельный символ).

Ширина неразрывного пробела зависит от кегля, параметров выключки и межсловных интервалов, тогда как неразрывный пробел с постоянной шириной всегда имеет одну и ту же ширину вне зависимости от контекста.

Изменение параметров выключки

Палитра «Выключка» используется для точного управления межсловными интервалами, межбуквенными интервалами и масштабом глифов. Настройка интервалов особенно полезна для выровненного текста, хотя они настраиваются и для невыровненного текста.

Примечание.

Межсловный интервал, межбуквенный интервал и масштабы глифов в настройках выключки игнорируются в тексте CJK. Чтобы задать межбуквенный интервал в тексте CJK, воспользуйтесь диалоговым окном «Модзикуми».

Настройка межсловного и межбуквенного интервала в выровненном тексте

  1. Поместите курсор в тот абзац, который нужно изменить, либо выделите текстовый объект или фрейм, в котором нужно изменить все абзацы.

  2. Выберите пункт «Выключка» в меню палитры «Абзац».

  3. Задайте значения параметров «Межсловные интервалы», «Межбуквенные интервалы» и «Масштаб глифов». Значения «Минимум» и «Максимум» определяют допустимый диапазон интервалов только для абзацев с выключкой. Значение параметра «Желаемые» определяется как для абзацев с выключкой, так и для абзацев без выключки:

    Межсловные интервалы

    Интервал между словами, появляющийся при нажатии клавиши «Пробел». Значения параметра «Межсловный интервал» могут меняться в диапазоне от 0 % до 1000 %. При значении 100 % дополнительный интервал между словами не добавляется.

    Межбуквенные интервалы

    Расстояние между буквами, включая значения кернинга и трекинга. Значения параметра «Межбуквенные интервалы» могут меняться в диапазоне от -100 % до 500 %. При значении 0 % дополнительный интервал между буквами не добавляется, при 100 % добавляется интервал шириной, равной обычному пробелу.

    Масштаб глифов

    Ширина символов (глиф — это любой символ шрифта). Масштаб глифов может варьироваться от 50% до 200%.

    Примечание.

    Параметры интервалов всегда применяются ко всему абзацу. Чтобы настроить интервалы для нескольких символов, а не для всего абзаца, воспользуйтесь параметром «Трекинг».

  4. Установите параметр «Выключка отдельных слов», чтобы указать, как выравнивать однословные абзацы.

    В узких столбцах может встретиться строка, содержащая только одно слово. Если абзац настроен на полную выключку, одиночное слово в строке может оказаться слишком растянутым. Вместо того чтобы оставлять подобные слова полностью выключенными, можно выровнять их по центру, по правому или по левому краю.

Установка масштаба глифов в выключенном тексте

  1. Установите точку ввода в абзац или выделите абзацы, которые необходимо изменить.

  2. Выберите пункт «Выключка» в меню палитры «Абзац».

  3. Задайте значения минимального, желаемого и максимального масштаба глифов. Затем нажмите кнопку «ОК».

Вид до (вверху) и после (внизу) масштабирования глифов в выключенном тексте Примечание.

С помощью масштабирования глифов можно добиться равномерности выравнивания, однако значения от 3 % свыше значения по умолчанию 100 % приводят к искажению буквоформ. Кроме случаев, когда необходимо добиться специального эффекта, рекомендуется использовать небольшие значения масштаба глифов, например 97–100–103.

Использование концевой шпации с выключенным текстом

Символ концевой шпации добавляет в конец последней строки абзаца с выключкой по ширине пробел переменной длины — от последнего слова до символа конца материала из декоративного шрифта. При использовании с невыключенным текстом концевая шпация отображается как обычный пробел между словами. В выключенном тексте она расширяется, занимая все доступное место в последней строке. При использовании концевой шпации компоновщик абзацев Adobe производит форматирование всего абзаца совершенно иначе.

До и после добавления символа концевой шпации
  1. При помощи инструмента «Текст»  щелкните непосредственно перед символом конца материала.

  2. Выберите «Текст» > «Вставить пробел» > «Концевая шпация».

Примечание.

Эффект применения концевой шпации незаметен до тех пор, пока к абзацу не будет применен параметр «Выключка по формату для всех строк».

Выделение цветом слишком разряженных или слишком плотных строк

Поскольку компоновка строки текста, помимо межсловных и межбуквенных интервалов, связана и с другими факторами (к примеру, с установками расстановки переносов), InDesign не всегда выдерживает заданные установки. Проблемы, возникшие при компоновке строк текста, могут быть выделены желтым цветом. Самый темный из трех оттенков соответствует наибольшей серьезности проблемы.

  1. Выберите «Редактирование > Установки > Компоновка» (Windows) или «InDesign > Установки > Компоновка» (Mac OS).

  2. Выберите параметр «Ошибки переносов и выключки» и нажмите кнопку «ОК».

Связанные материалы

  • Выравнивание текста по объектам обтекания
  • Изменение установок компоновки CJK
  • Словари для расстановки переносов и проверки орфографии

css — перенос слов в таблице HTML

спросил

Изменено 14 дней назад

Просмотрено 1,0 м раз

Я использовал word-wrap: break-word для переноса текста в div s и span s. Однако, похоже, это не работает в ячейках таблицы. У меня стол на ширина: 100% , с одной строкой и двумя столбцами. Текст в столбцах, несмотря на то, что он оформлен с помощью приведенного выше word-wrap , не переносится. Это заставляет текст выходить за границы ячейки. Это происходит в Firefox, Google Chrome и Internet Explorer.

Вот как выглядит исходник:

 td {
  граница: сплошная 1px;
} 
 <таблица>
  
    <тд>
      <дел>
        Доооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо
      
Короткое слово

Длинное слово выше больше, чем границы моей страницы, но оно не нарушает приведенный выше HTML. Я пробовал приведенные ниже предложения по добавлению text-wrap:suppress и text-wrap:normal , но ни один из них не помог.

  • HTML
  • CSS
  • HTML-таблица
8

В Internet Explorer у меня работает следующее. Обратите внимание на добавление атрибута table-layout :fixed CSS 9.0005

 тд {
  граница: сплошная 1px;
} 
 <таблица>
  
    <тд>
      Доооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо
    
    Короткое слово
  
 
10

 длинный текст без пробела
 

или

 longtextwithoutspace
 
6

Вы можете перепроверить с помощью Firebug (или аналогичного), что вы случайно не наследуете следующее правило:

 white-space:nowrap;
 

Это может переопределить указанное вами поведение разрыва строки и, таким образом, нарушить перенос слов. (Комментарии Шейна Ли и Beer Me.) Чтобы решить эту проблему, вы можете добавить white-space:normal; к стилю.

0

Оказывается, нет хорошего способа сделать это. Самое близкое, что я подошел, это добавить «overflow: hidden;» в div вокруг стола и потерять текст. Однако реальное решение, похоже, состоит в том, чтобы отказаться от таблицы. Используя div и относительное позиционирование, я смог добиться того же эффекта, за исключением наследия

2015 UPDATE: Это для тех, кто любит этот ответ. Спустя 6 лет это работает, спасибо всем участникам.

 * { /* это работает для всех, кроме td */
  перенос слов:разрывное слово;
}
table { /* это каким-то образом заставляет работать td */
  макет таблицы: фиксированный;
  ширина:100%;
}
 
2

Как уже упоминалось, размещение текста внутри div почти работает. Вам просто нужно указать width div , что удобно для статических макетов.

Работает в FF 3.6, IE 8, Chrome.

 <тд>
  <дел>
    
  

2

Обходной путь, который использует перенос с переполнением и отлично работает с обычным макетом таблицы + шириной таблицы 100%

<тд> <дел> wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

CSS

 .content{
  перенос слов:разрывное слово; /*старые браузеры*/
  переполнение-обертка: перерыв-слово;
}
стол{
  ширина:100%; /*должен быть установлен (любое значение)*/
}
.overflow-wrap-hack {
  максимальная ширина: 1px;
}
 

Преимущества:

  • Использует overflow-wrap:break-word вместо word-break:break-all . Что лучше, потому что он сначала пытается разбить пробелы и обрезает слово, только если слово больше, чем его контейнер.
  • макет таблицы: исправлено необходимо. Используйте свой обычный автоматический размер.
  • Не требуется для определения фиксированной ширины или фиксированной максимальной ширины в пикселях. Определите % родителя, если это необходимо.

Протестировано в FF57, Chrome62, IE11, Safari11

2

Проблема с

 

заключается в том, что он будет работать не так хорошо, когда текст имеет пробелов, например.

 

Если слово и далее без пробелов помещается в ячейку таблицы в одну строку, а длинный текст с пробелами и далее без пробелов — нет, то длинное слово будет разбито на две части, а не перенесено.

Альтернативное решение: вставить U+200B (ZWSP), U+00AD (мягкий дефис) или U+200C (ZWNJ) в каждом длинном слове после каждого, скажем, 20-го символа (однако см. предупреждение ниже):

 тд {
  граница: сплошная 1px;
} 
 <таблица>
  
<тд> <дел> Ооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо поооооооооо пооо из уууууууууууууууууууууууууууууууууууууууууууууууууууу

Предупреждение : вставка дополнительных символов нулевой длины не влияет на чтение. Однако это влияет на текст, скопированный в буфер обмена (конечно, эти символы тоже копируются). Если текст буфера обмена позже будет использоваться в какой-либо функции поиска в веб-приложении… поиск будет нарушен. Хотя это решение можно увидеть в некоторых известных веб-приложениях, по возможности избегайте его.

Предупреждение : при вставке дополнительных символов не следует разделять несколько кодовых точек внутри графемы. См. https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries для получения дополнительной информации.

3

Измените свой код

 word-wrap: break-word;
 
от

до

 word-break:break-all;
 

Пример

 <таблица>
  
<тд>
longtextwithoutspacelongtextwithoutspace Длинное содержание, Длинное содержание, Длинное содержание, Длинное содержание, Длинное содержание, Длинное содержание, Длинное содержание, Длинное содержание, Длинное содержание, Длинное содержание
1

Посмотрите эту демонстрацию

 
longtextwithoutspace длинный текст с пробелами и далее без пробелов
Короткое слово
Краткое содержание
<тд> Фу

Вот ссылка для чтения

1

Протестировано в IE 8 и Chrome 13.

 
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongW ordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
<тд> <дел> длинный текст

Это заставляет таблицу соответствовать ширине страницы, а каждый столбец занимает 50% ширины.

Если вы предпочитаете, чтобы первый столбец занимал большую часть страницы, добавьте ширину : 80% к td , как в следующем примере, заменив 80% процентом по вашему выбору.

 <таблица>
    
<тд> <дел> длинный текст

Единственное, что нужно сделать, это добавить ширину к

Фу
Фу
или
внутри
в зависимости от макета, который вы хотите получить.

например:

 

или

 
луооооооооодаsdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word
Фу
1

Похоже, вам нужно установить word-wrap:break-word; в блочном элементе ( div ) с указанной (не относительной) шириной. Пример:

 <таблица>
луооооооооодаsdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word
Фу
луооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо оооооооооооооооооооооооооооооочень длинное слово
Фу

или с помощью word-break:break-all по предложению Абхишека Саймона.

0

Ответ, выигравший награду, правильный, но он не работает, если в первой строке таблицы есть объединенная/объединенная ячейка (все ячейки имеют одинаковую ширину).

В этом случае вы должны использовать теги colgroup и col для правильного отображения:

 <столбец>
    <столбец>
0

 

длинный текст здесь

1

я пробовал все, но в моем случае у меня работает только

 white-space: pre-wrap;
перенос слов: прерывание слова;
 

Столкнулся с похожей проблемой. У меня была таблица внутри модального окна Bootstrap в приложении AngularJS. Когда я менял фильтр в таблице и в рассматриваемой ячейке появлялись длинные значения, текст выходил за пределы ячейки и за пределы модального окна. Этот CSS решил проблему, примененную к TD:

 style="white-space:pre-wrap; word-break:break-word"
 

Благодаря этому значения переносятся правильно даже при изменении содержимого таблицы.

0

У меня работает:

  
Объединенная ячейка
Очень длинное слово в этой ячейке Ячейка 2