Строка из 5 столбцов с длинным текстом в Bootstrap 4
Я знаю, как bootstrap 4 работает с col вместо col-xs, но проблема, с которой я сталкиваюсь, заключается в том, что когда текст в столбце слишком длинный для размещения на устройстве с маленьким экраном, столбцы начинают складываться друг под другом. Есть ли способ предотвратить это и установить ширину столбца на 1/5 экрана и просто обрезать лишний текст.
Попробуйте приведенный ниже код и уменьшите ширину своего браузера.
<div class = "container-fluid">
<div class = "row">
<div class = "col">some loong loong loong loong loong text</div>
<div class = "col">some loong loong loong loong loong text</div>
<div class = "col">some loong loong loong loong loong text</div>
<div class = "col">some loong loong loong loong loong text</div>
<div class = "col">some loong loong loong loong loong text</div>
</div>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
0
4 515
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Вы можете использовать класс text-truncate. Это предотвратит перенос текста внутри столбцов и использование многоточия (...), когда текст слишком длинный.
https://www.codeply.com/go/rGFZfVlidi
<div class = "container-fluid">
<div class = "row">
<div class = "col text-truncate">some loong loong loong loong loong text</div>
<div class = "col text-truncate">some loong loong loong loong loong text</div>
<div class = "col text-truncate">some loong loong loong loong loong text</div>
<div class = "col text-truncate">some loong loong loong loong loong text</div>
<div class = "col text-truncate">some loong loong loong loong loong text</div>
</div>
</div>
В качестве альтернативы можно использовать text-nowrap, если вам не нужен .... Подробнее о перенос и переполнение текста в Bootstrap 4.
Вы можете избежать обертывания, добавив flex-nowrap
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel = "stylesheet" >
<div class = "container-fluid">
<div class = "row flex-nowrap">
<div class = "col">some loong loong loong loong loong text</div>
<div class = "col">some loong loong loong loong loong text</div>
<div class = "col">some loong loong loong loong loong text</div>
<div class = "col">some loong loong loong loong loong text</div>
<div class = "col">some loong loong loong loong loong text</div>
</div>
</div>Другие вопросы по теме
Фон всплывающего окна html перекрывается с фоном на мобильном устройстве
Выровняйте по горизонтали два пролета в середине гибкого бокса
Попытка выровнять текст и значок html / css
Заполнение и поле не работают в адаптивном шаблоне электронной почты (Outlook)
Выравнивание виджетов по нижнему краю внутри блоков ui-grid
Попытка изменить размер изображения до полноэкранного изображения при изменении размера до меньшего экрана и проблема с пробелами
Масштабирование перехода на фоновом изображении некорректно работает в сафари при наличии радиуса границы
Материализовать Datepicker без модального окна?
Bootstrap несколько целей - родитель переключает все?
Добавление расстояния между дроплистом и его кнопкой
Похожие вопросы
Фон всплывающего окна html перекрывается с фоном на мобильном устройстве
Angular тестирование: не удалось загрузить компонент html
Ng-container не работает внутри компонента ionic2 "ion-item-slip"
Выровняйте по горизонтали два пролета в середине гибкого бокса
Попытка выровнять текст и значок html / css
Как отобразить массив вертикально в виде таблицы javascript
Заполнение и поле не работают в адаптивном шаблоне электронной почты (Outlook)
Скрыть набор div, если внутренний div не содержит текста
HTML DOM Выбрать объект с помощью JavaScript
Angular 2: как получить значения динамического раскрывающегося списка