Введение

Internet Explorer 10 на Windows 8 и Windows Phone 8

Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Важные глобальные переменные

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

В HTML5 Тип документа

Bootstrap требует использования HTML5 doctype. Без него вы увидите местами неполные стили, но в том числе он не должен вызывать каких-либо значительных сбоев.

Адаптивный Мета-тег

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

Вы можете увидеть пример этого в действии в .

Размерность блоков

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

В тех редких случаях, вы должны переопределить его, использовать что-то вроде следующего:

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

Узнать больше о модель и размер в CSS трюки.

Normalize.css

Для улучшения кросс-браузер рендеринга, мы используем чтобы устранить небольшие расхождения в разных браузерах и на разных устройствах. Мы и в дальнейшем построить на этом с нашей, чуть более самоуверенные типы с Reboot.

Изменение визуального порядка следования адаптивных блоков

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

Изменить визуальный порядок следования адаптивного блока в Bootstrap 4 выполняется посредством класса . Этот класс предназначен для контрольной точки . Если порядок элемента нужно определить не для контрольной точки , а для , , или , то используется следующий вариант данного класса:

order-{breakpoint}-{visual_number}

Вместо необходимо указать число от 1 до 12.

Это число и определяет то, как элементы будут визуально следовать на странице. А именно все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс , то по умолчанию он имеет значение 0.

Например, изменим порядок следования двух адаптивных блоков:

<div class="row">
  <div class="col">
    Первый (не упорядоченный, без класса order-)
    <!-- По умолчанию order, равно 0, поэтому он и первый-->
  </div>
  <div class="col order-12">
    Второй, но будет отображаться последним
  </div>
  <div class="col order-1">
    Третий, но будет отображаться вторым
  </div>
</div>

Ещё один пример (с использованием адаптивных классов ):

<div class="row">
  <div class="col-md-8 order-2 order-md-1">
    Первый (на xs, sm будет отображаться вторым)
  </div>
  <div class="col-md-4 order-1 order-md-2">
    Второй (на xs, sm будет отображаться первым)
  </div>
</div>

Кроме чисел (по умолчанию от 1 до 12) можно ещё использовать слова и . Эти классы (, , , ) позволяют соответственно визуально сместить элемент в начало или конец.

Классы и оказывают своё действие посредством установки элементу CSS свойства со значением -1 (), а классы и — CSS свойства со значением 13 ().

Перепишем вышеприведённый пример с использованием классов , в которых используются ключевые слова и :

<div class="row">
  <div class="col-md-8 order-last order-md-first">
    Первый (на xs, sm будет отображаться последним)
  </div>
  <div class="col-md-4 order-first order-md-last">
    Последний (на xs, sm будет отображаться первым)
  </div>
</div>

Пример с использованием классов как с числом, так и со словами и :

<div class="row">
  <div class="col-3 order-sm-last order-md-1">#1 (XS), #LAST (SM), #1 (MD, LG и XL)</div>
  <div class="col-3 order-md-7">#2 (XS), #7 (MD, LG и XL)</div>
  <div class="col-3 order-md-6">#3 (XS), #6 (MD, LG и XL)</div>
  <div class="col-3 order-md-5">#4 (XS), #5 (MD, LG и XL)</div>
  <div class="col-3 order-md-4">#5 (XS), #4 (MD, LG и XL)</div>
  <div class="col-3 order-md-3">#6 (XS), #3 (MD, LG и XL)</div>
  <div class="col-3 order-md-2">#7 (XS), #2 (MD, LG и XL)</div>
  <div class="col-3 order-sm-first order-md-8">#8 (XS), #FIRST (SM), #8 (MD, LG и XL)</div>
</div>

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

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

Так как Bootstrap предназначен для создания адаптивных сайтов, то изображения при построении такой сетки не должны выходить за пределы своего блока (элемента, в который каждое из них помещено).

Чтобы сделать изображения гибкими к ним нужно добавить специальные классы этого фреймворка:

• в Bootstrap 3;
• в Bootstrap 4.

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

<!-- Bootstrap 3 -->
<img src="..." class="img-responsive">

<!-- Bootstrap 4 -->
<img src="..." class="img-fluid">

Эти классы на самом деле выполняют очень простые действия, они применяют к изображению CSS-свойства и .

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

/* 1 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались как строчно-блочные элементы (inline-block) */
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

/* 2 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались на странице как блочные элементы (block) */
img {
  display: block;
  height: auto;
  max-width: 100%;
}

Если необходимо сделать не все изображения на странице гибкими, а только те, которые расположены в определённом блоке, то в этом случае это необходимо определить с помощью CSS-селекторов:

/* например, сделаем гибкими только те изображения, которые расположены в элементе с классом main */
.main img {
  display: block;
  height: auto;
  max-width: 100%;
  /* дополнительно их выровняем по центру */
  margin-left: auto;
  margin-right: auto;
  /* и добавим внешний нижний отступ */
  margin-bottom: 15px;
}

При необходимости изображениям можно задать определённый размер. Осуществляется это с помощью стандартных атрибутов и :

<!-- Гибкое изображение, имеющее ширину 600 пикселей (Bootstrap 3) -->
<img src="..." class="img-responsive" width="600">

<!-- Гибкое изображение, имеющее размер 600x800 пикселей (Bootstrap 4) -->
<img src="..." class="img-fluid" width="600" height="800">

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

Sass

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

Main content
Secondary content

Пропуск навигации

Благодаря давнему недостатки/ошибки в Chrome (см. вопрос 262171 в хром багтрекер) и Internet Explorer (см. эту статью на ссылки и фокус того), Вы должны убедиться, что цель вашей ссылке пропустить хотя бы программно фокусируемый, добавив .

Кроме того, может потребоваться явно подавляет видимый фокусировки на мишени (в частности, хром в настоящее время также устанавливает фокус на элементах с при щелчке мышкой) с .

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

Оформление строчных (inline) текстовых элементов HTML5

Bootstrap содержит стили для основных HTML5 inline элементов: , , , , , , , , и .

…для выделения текста, имеющего актуальность в другом контексте…

…для выделения текста, который был удалён из документа…

…для выделения текста, который потерял уже свою актуальность…

…для разметки текста, который был добавлен в документ…

…для разметки текста, который стилистически отличается от обычного текста (например, является невнятным или содержит ошибки в написании слов) …

…используется в основном для разметки информации, которая должна отображаться на странице более мелким шрифтом (например, авторских прав)…

…для разметки важного текста…

…для разметки текста, который имеет эмоциональную окраску…

…для разметки текста, стилистически отличающегося от обычного текста, без передачи ему какого-либо особого значения или значимости (например, для выделения ключевых слов, названий продуктов в обзоре)…

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

Как сделать текст жирным, наклонным или подчёркнутым

В Bootstrap 4 для этих целей уже есть подготовленные классы , , и .

<p class="font-weight-bold">Жирный текст...</p>
<p class="font-weight-normal">Нормальный (не жирный текст)...</p>
<p class="font-weight-light">Текст, имеющий тонкое начертание...</p>
<p class="font-italic">Курсивный текст...</p>

Если используете Bootstrap 3, то вы их можете добавить следующие стили в свой файл CSS, а затем использовать их в HTML (посредством добавления к элементам необходимых классов):

.font-weight-bold {
  font-weight: 700;
}
.font-weight-normal {
  font-weight: 400;
}
.font-weight-light {
  font-weight: 300;
}
.font-italic {
  font-style: italic;
}
.text-underline {
  text-decoration: underline;
}

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

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

<div class="container">
  <div class="row">
    <div class="col-6"> (1) </div>
    <div class="col-6"> (2) </div>
    <div class="col-12"> (3) </div>
    <div class="col-8"> (4) </div>
  </div>
</div>

Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на sm-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs и md-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs, sm и lg-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
</div>

Печать

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

В частности, в Chrome версии 32 независимо от параметров отступов и размеров полей, Chrome при печати использует значительно более узкую область просмотра, чем физический размер бумаги при отображении медиа запросов. Это может привести к тому, при печати Bootstrap неожиданно активирует очень мелкую сетку. и Ошибке Chrome #273306. Рекомендуемые обходные пути:

• Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
• Настройка значения Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
• Добавить Пользовательское медиа запросы изменение грид Размер точки останова для печати медиа только.

Также, как Сафари и v8.0, фиксированной ширины может вызвать Сафари использовать необычайно маленький размер шрифта при печати. См. #14868 и В WebKit ошибка #138192 Для более подробной информации. Одним из возможных обойти это, добавив следующие CSS:

Quick start

Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? Head to the downloads page.

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

We use jQuery’s slim build, but the full version is also supported.

Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Our and include Popper, but not jQuery. For more information about what’s included in Bootstrap, please see our section.

Show components requiring JavaScript

• Alerts for dismissing
• Buttons for toggling states and checkbox/radio functionality
• Carousel for all slide behaviors, controls, and indicators
• Collapse for toggling visibility of content
• Dropdowns for displaying and positioning (also requires Popper.js)
• Modals for displaying, positioning, and scroll behavior
• Navbar for extending our Collapse plugin to implement responsive behavior
• Tooltips and popovers for displaying and positioning (also requires Popper.js)
• Scrollspy for scroll behavior and navigation updates

Two Basic Bootstrap Pages

The following example shows the code for a basic Bootstrap page (with a responsive fixed width container):

Example

<!DOCTYPE html><html lang=»en»><head>  <title>Bootstrap Example</title>  <meta charset=»utf-8″>  <meta name=»viewport» content=»width=device-width, initial-scale=1″>  <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css»>
 
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>
 
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js»></script>
</head><body><div class=»container»>  <h1>My First Bootstrap Page</h1>  <p>This is some text.</p> </div></body></html>

The following example shows the code for a basic Bootstrap page (with a full width container):

Example

<!DOCTYPE html><html lang=»en»><head>  <title>Bootstrap Example</title>  <meta charset=»utf-8″>  <meta name=»viewport» content=»width=device-width, initial-scale=1″>  <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css»>
  <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>
 
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js»></script></head><body><div class=»container-fluid»>  <h1>My First Bootstrap Page</h1>  <p>This is some text.</p> </div></body></html>

❮ Previous
Next ❯

Пользовательские компоненты

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

Простой одностраничный шаблон для фотогалереи, портфолио и т.д.

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

Пользовательская форма оформления заказа, показывающая наши компоненты формы и их функции проверки.

Экономичная маркетинговая страница, ориентированная на продукт, с обширной сеткой и изображениями.

Одностраничный шаблон для создания простых и красивых домашних страниц.

Настройте панель навигации и карусель, а затем добавьте новые компоненты.

Журнал как шаблон блога с заголовком, навигацией, избранным контентом.

Базовая оболочка панели администратора с фиксированной боковой панелью и навигационной панелью.

Индивидуальный макет и дизайн формы для простой формы входа.

Прикрепленный нижний колонтитул к нижней части области просмотра, когда содержимое страницы мало.

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

Назначение Bootstrap сетки. Контрольные точки

Сетка Bootstrap 4 – это основная часть фреймворка. Она предназначена для создания адаптивных шаблонов.

Сетка Bootstrap 4 основывается на CSS Flexbox и медиа-запросах (CSS media queries). Чтобы понять, как она работает более точно, рекомендуется сначала изучить эти CSS технологии.

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

Если кратко, адаптивный макет – это такой макет, вид которого может изменяться в зависимости от того, какую ширину viewport имеет браузер. Это означает, что при одних значениях ширины viewport адаптивный макет может выглядеть одним образом, а при иных – совершенно по-другому.

В Bootstrap изменения вида макета реализовано через медиа-запросы. Каждый медиа-запрос в Bootstrap строится на основании минимальной ширины viewport браузера. В Bootstrap ключевое значение ширины viewport в медиа-запросе называется breakpoint (контрольной точкой, или более просто классом устройства).

На схеме приведены основные контрольные точки, которые Bootstrap 4 имеет по умолчанию:

Это означает что до 576px макет сайта может отображаться одним образом, от 576px до 768px – другим образом и т.д. Таким образом, можно создать макет, который на каждом из этих участков может выглядеть по-разному.

Контрольные точки имеют обозначение. Первый breakpoint не имеет обозначения (), второй называется – , третий – , четвёртый – и пятый – . Эти обозначения необходимо запомнить, т.к. они используются в классах, которые мы будем добавлять к элементам. Эти обозначения в имени класса будут указывать на то с какой ширины viewport стили, определённые в нём, будут применяться к элементу.

Ширина viewport браузера	Контрольная точка (название устройства)
>=0	без обозначения (xs)
>=576px	sm
>=768px	md
>=992px	lg
>=1200px	xl

При этом, контрольные точки задают только минимальную ширину. Т.е., например, если вы определили макет, используя в нём классы без обозначения контрольной точки () и с использованием , то он на будет иметь такую же структуру как на , а на и — как на .

Если вы знакомы с сеткой Bootstrap 3, то в ней количество контрольных точек равнялось четырём.

Quick start

Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? Head to the downloads page.

JS

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper. Place one of the following s near the end of your pages, right before the closing tag, to enable them.

Bundle

Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both and include Popper for our tooltips and popovers. For more information about what’s included in Bootstrap, please see our section.

Separate

If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.

Components

Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Show components requiring JavaScript

• Alerts for dismissing
• Buttons for toggling states and checkbox/radio functionality
• Carousel for all slide behaviors, controls, and indicators
• Collapse for toggling visibility of content
• Dropdowns for displaying and positioning (also requires Popper)
• Modals for displaying, positioning, and scroll behavior
• Navbar for extending our Collapse plugin to implement responsive behavior
• Toasts for displaying and dismissing
• Tooltips and popovers for displaying and positioning (also requires Popper)
• Scrollspy for scroll behavior and navigation updates

Как устранить выход текста за пределы

Если в тексте имеется какое-то длинное слово и ему не хватает длины блока, то оно выйдет за его пределы.

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

<!-- ... -->
<style>
/* CSS: */
.main {
  word-wrap: break-word;
}
</style>
<!-- ... -->
<div class="main">
  Некоторый контент...
</div>

Кроме этого, бывают ситуации, когда вы задаёте блоку фиксированную высоту, а контент, который содержит данный блок, в него не помещается.

В этом случае можно блоку задать CSS свойство со значением . Данное CSS-свойство будет скрывать контент, который не помещается в данный блок.

<!-- ... -->
<style>
/* CSS: */
.main {
  word-wrap: break-word;
  overflow: hidden;
}
</style>
<!-- ... -->
<div class="main" style="height: 200px;">
  Некоторый контент...
</div>

Но можно поступить и по-другому, а именно показать пользователю, что это не весь контент, добавив после него три точки.

Для этого можно скачать js-плагин dotdotdot. Подключить его к странице и назначить необходимым элементам.

<div class="main" style="height: 200px;">
  Некоторый контент...
</div>
<!-- ... -->
<script src="jquery.dotdotdot.min.js"></script>
<script>
$(function(){
  $('.main').dotdotdot();
});
</script>

Ещё одна очень частая задача — это когда текст необходимо расположить в одну строку. Это осуществляется с помощью CSS-свойство со значением .

<!-- ... -->
<style>
/* CSS: */
.main {
  white-space: nowrap;
}
</style>
<!-- ... -->
<div class="main" style="height: 200px;">
  Некоторый контент...
</div>

Для скрытия контента, который не помещается в блок, также можно использовать CSS-свойство со значением . Если необходимо добавить троеточие после текста, то нужно дополнительно ещё добавить CSS-свойство со значением .

<!-- ... -->
<style>
/* CSS: */
.main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
<!-- ... -->
<div class="main" style="height: 200px;">
  Некоторый контент...
</div>

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

<!-- ... -->
<style>
/* CSS: */
.main {
  overflow: auto;
}
</style>
<!-- ... -->
<div class="main" style="height: 200px;">
  Некоторый контент...
</div>