При верстке DivCSS вам необходимо контролировать текст. Сегодня я познакомлю вас с этим систематически. В CSS есть четыре свойства, которые управляют разрывами строк.
1. пробел
Вы можете добиться эффекта тегов PRE в HTML и эффекта noWrap для ячеек.
грамматика:
пробел: нормальное состояние до Nowrap
Ценить:
нормальный: значение по умолчанию. Метод обработки по умолчанию. Текст автоматически обрабатывает разрывы строк. Если достигнута граница контейнера, содержимое перейдет на следующую строку.
pre: символы новой строки и другие пробелы будут защищены. Это значение требует, чтобы IE6+ или !DOCTYPE были объявлены как поддержка режима, соответствующего стандартам. Если в объявлении !DOCTYPE не указан режим совместимости со стандартами, этот атрибут можно использовать, но он не будет иметь никакого эффекта. Результат соответствует нормальному. См. предварительный объект
nowrap: заставляет весь текст отображаться в одной строке до тех пор, пока не встретится конец текста или объект br. См. атрибут noWrap.
проиллюстрировать:
Устанавливает или извлекает способ обработки пробельных символов внутри объекта.
Пробелы, такие как символы новой строки, пробелы и TAB, по умолчанию игнорируются в документах HTML. Если для этого свойства установлено значение Normal или Nowrap, вы можете использовать именованный объект без переноса пробелов для добавления пробелов и элемент br для добавления разрывов строк. Это свойство оказывает такое же влияние на контент, которым вы манипулируете с помощью объектной модели документа (DOM), как и на контент, отображаемый IE.
Это свойство работает с блочными объектами.
Связанные стили:
переполнение текста
Объединение его с пробелами избавляет от необходимости писать программу для определения длины строки. Нажмите здесь, чтобы просмотреть пример.
грамматика:
text-overflow: многоточие клипа
Ценить:
клип: значение по умолчанию. Не показывает маркеры пропуска (…), а просто обрезает
многоточие: отображает знак многоточия (…), когда текст внутри объекта выходит за пределы.
проиллюстрировать:
Задает или получает, следует ли использовать знак многоточия (...) для обозначения переполнения текста внутри объекта.
Это свойство влияет только на переполнение обычного западного текста в горизонтальном линейном направлении. Переполнение строки происходит, когда текст внутри строки превышает доступную ширину без возможности переноса.
Чтобы вызвать переполнение и применить значение многоточия, автор должен установить для свойства white-space объекта значение nowrap.
Если нет возможности для разрывов строк (например, ширина контейнера объекта узкая и имеется длинный текст без разумных разрывов строк), можно выполнить переполнение без применения nowrap.
Чтобы можно было применить значение многоточия, это свойство должно быть установлено для объекта, имеющего невидимую область. Лучший вариант — установить скрытое свойство переполнения. Это свойство также применяется при настройке свойства переполнения на прокрутку или авто. Но появятся полосы прокрутки.
Выбрав знак пропуска, можно выделить скрытый текст. При выборе многоточие скрывается и заменяется текстом.
Этот атрибут обеспечивает эффективный способ создания разметки пропусков в DHTML.
2. разрыв слова
Наиболее часто используемое свойство для управления переносом строк часто используется в сочетании с переносом слов ниже.
грамматика:
word-break: обычный перерыв-все-все-все
Ценить:
нормальный: значение по умолчанию. Разрешить разрывы строк между словами
Break-all: такое поведение такое же, как и обычное для азиатских языков. Разрывы внутри любого слова строки текста неазиатского языка также допускаются. Это значение подходит для текста на азиатском языке, который содержит неазиатский текст.
Keep-all: То же самое, что и обычное для всех неазиатских языков. В китайском, корейском и японском языках разрывы слов не допускаются. Подходит для неазиатского текста с небольшим количеством азиатского текста.
проиллюстрировать:
Устанавливает или извлекает режим переноса слов для текста внутри объекта. Особенно когда появляется несколько языков.
Для китайского языка следует использовать Break-All. [Вырезанная страница]
3. перенос слов
Если веб-страница, которую вы разрабатываете, не адаптивна по ширине, вам необходимо установить ее на разрыв слова, иначе страница может располагаться в шахматном порядке.
грамматика:
перенос по словам: обычное переносимое слово
Ценить:
нормальный: значение по умолчанию. Разрешить выход содержимого за пределы указанных границ контейнера
Break-word: Контент будет выходить за пределы границ. При необходимости также произойдет разрыв слова.
проиллюстрировать:
Задает или получает, следует ли разрывать строку, когда текущая строка выходит за границу указанного контейнера.
Это свойство работает только с объектами макета, такими как объекты блоков. Чтобы использовать этот атрибут для встроенных элементов, необходимо сначала установить атрибут высоты или ширины объекта, либо установить для атрибута позиции значение абсолютного, либо установить для атрибута отображения значение Block.
4. переполнение, переполнение-x, переполнение-y
Это не строго контролирует стиль переноса строк, но установка скрытого режима может компенсировать недостатки переноса по словам в определенные моменты. Например, вы хотите отображать только одну строку текста в пределах ограниченной ширины, но длины этой строки. текста превышает эту ширину, в сочетании с пробелами+переполнением текста можно добиться лучших результатов.
грамматика:
переполнение: видимая автоматическая скрытая прокрутка
Ценить:
видимый: значение по умолчанию. Не обрезает контент и не добавляет полосы прокрутки. Если это значение по умолчанию явно объявлено, объект будет обрезан по размерам содержащего его окна или фрейма. И настройка атрибута клипа будет недействительной.
авто: содержимое объекта будет обрезано или при необходимости будут отображаться полосы прокрутки.
скрыто: не отображать содержимое, превышающее размер объекта.
прокрутка: всегда показывать полосы прокрутки
проиллюстрировать:
Извлекает или задает способ управления содержимым объекта, когда оно превышает заданную высоту и ширину.
Значение по умолчанию для всех объектов отображается, за исключением объектов textarea и body, где значением по умолчанию является auto. Установка значения скрытого свойства объекта текстовой области скроет его полосы прокрутки.
Для таблиц, если для атрибута table-layout установлено значение «fixed», объект td поддерживает атрибут переполнения со значением по умолчанию «скрытый». Если установлено значение «Прокрутка» или «Авто», содержимое, превышающее размер td, будет обрезано. Если установлено значение «видимый», дополнительный текст будет переполняться в ячейках справа или слева (в зависимости от настройки свойства направления).
Это свойство доступно на платформах MAC, начиная с IE5.
Начиная с IE6, этот атрибут можно применять к объектам html, если вы указываете режим совместимости со стандартами с помощью объявления !DOCTYPE.