Вопрос или проблема
Я пытался найти ответ на этот вопрос, однако ни один из использованных мной методов не сработал. У меня есть 4 столбца, которые мне нужны на моем сайте, и когда я вставляю большой (или относительно нормальный) параграф в мой HTML, мой CSS сливает текст в следующий столбец и странным образом обрезает его в конце столбца, в котором он должен быть, когда сетка полностью простирается до дна страницы.
Это то, что у меня сейчас, и я ожидал, что текст будет в одном столбце, а не перейдет в следующий. Это мой текущий CSS (кстати, я использую CSS grid):
.columns {
width: auto;
display: inline-block;
column-count: 4;
grid-column: 6;
grid-row: 6 / span 8;
margin-top: 10px;
text-align: center;
text-overflow: ellipsis;
}
.col {
overflow-wrap: break-word;
}<div class="columns">
<div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1">
<p class="text">Ut efficitur dapibus lorem, a facilisis eros aliquet vel. Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam
auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis
eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam
auctor sc</p>
</div>
<div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1">
<p>Привет</p>
</div>
<div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1">
<p>Привет</p>
</div>
<div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1">
<p>Привет</p>
</div>
</div>Извините, если это так запутано, я новичок в веб-разработке. Я буду благодарен за любую помощь!
</div><div class="s-prose js-post-body" itemprop="text">Используйте grid для разметки столбцов, вместо num-columns
.columns {
width:auto;
/* ИЗМЕНИТЕ Используйте сетку для расположения */
/* display: inline-block; */
display: grid;
grid-template-columns: repeat(4, 1fr);
/* ИЗМЕНИТЕ Установите количество столбцов с помощью сетки */
/* column-count: 4; */
grid-column: 6;
grid-row: 6 / span 8;
margin-top: 10px;
text-align: center;
text-overflow: ellipsis;
}
.col {
overflow-wrap: break-word;
/* ИЗМЕНИТЕ Отладка */
border: 2px solid brown;
}<div class="columns">
<div class="col">
<img src="https://dummyimage.com/100x80/000/fff" id="image1">
<p class="text">Столбец 1. Ut efficitur dapibus lorem, a facilisis eros aliquet vel. Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc, a facilisis eros aliquet vel. Aliquam auctor sc, Aliquam auctor sc
</p>
</div>
<div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p>Привет. Столбец 2</p></div>
<div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p>Привет. Столбец 3</p></div>
<div class="col"><img src="https://dummyimage.com/100x80/000/fff" id="image1"><p>Привет. Столбец 4</p></div>
</div>.
Ответ или решение
Когда вы сталкиваетесь с проблемой, когда текст вашего веб-сайта "перетекает" в следующую колонку, это может быть вызвано неправильными настройками CSS, которые вы используете, а также недочетами в разметке HTML. В вашем случае, вы применяете как CSS Grid, так и некоторые свойства колонки, такие как column-count, что может вызвать конфликт в отображении. Рассмотрим детали вашей проблемы и предложим решения.
Причина проблемы
-
Несоответствие в использовании CSS
display: В вашем оригинальном CSS коде вы используетеdisplay: inline-block;вместе сcolumn-count: 4;. В результате этого может возникнуть ситуация, когда текст переходит в другую колонку при переполнении, посколькуcolumn-countвообще не предназначен для комбинирования с Grid. -
Проблемы с обтеканием текста: Свойство
overflow-wrap: break-word;на.colможет привести к тому, что длинные слова или строки текста не будут обрабатываться должным образом, что также может вызвать переполнение.
Решение проблемы
Решение заключается в том, чтобы полностью переключиться на использование CSS Grid, что даст вам больший контроль над расположением ваших колонок и ячеек.
Измененный CSS код
.columns {
width: auto;
display: grid; /* Изменим на grid */
grid-template-columns: repeat(4, 1fr); /* Создаем 4 равные колонки */
grid-gap: 10px; /* Добавьте промежутки между колонками, если необходимо */
grid-column: 6;
grid-row: 6 / span 8;
margin-top: 10px;
text-align: center;
text-overflow: ellipsis; /* Этот параметр может не сработать в данном случае */
}
.col {
overflow-wrap: break-word; /* Позволяет тексту "переполняться" */
border: 2px solid brown; /* Временное оформление для отладки */
}Измененный HTML код
Не забудьте поддерживать правильную разметку HTML:
<div class="columns">
<div class="col">
<img src="https://dummyimage.com/100x80/000/fff" id="image1">
<p class="text">Ваш текст здесь. Убедитесь, что текст нормально помещается в колонку.</p>
</div>
<div class="col">
<img src="https://dummyimage.com/100x80/000/fff" id="image1">
<p>Другой текст здесь.</p>
</div>
<div class="col">
<img src="https://dummyimage.com/100x80/000/fff" id="image1">
<p>Еще один текст здесь.</p>
</div>
<div class="col">
<img src="https://dummyimage.com/100x80/000/fff" id="image1">
<p>Последний текст здесь.</p>
</div>
</div>Рекомендации по отладке
-
Отладка границ: Используйте свойства границ для временной отладки, чтобы видеть, как элементы располагаются друг относительно друга. Это поможет вам визуально определить, где происходит переполнение и неправильно распределение.
-
Медиа-запросы: Для обеспечения отзывчивости вашего дизайна используйте медиа-запросы, чтобы адаптировать количество колонок под разные разрешения экранов.
Используя данные рекомендации и корректировки, вы сможете устранить проблему с "перетеканием" текста и улучшить общий вид вашей страницы. Не забывайте всегда тестировать изменения на различных устройствах и в разных браузерах, чтобы убедиться в корректности отображения.