пытаюсь вывести на страницу в отдельные блоки данные из таблицы, но если текст немного длиннее то все идёт в одну строку как будто игнорит CSS.
вот так должно выглядеть так выглядит когда создаётся блок через пхп
//html код блока
<div id="article">
<img src="img/1.jpg">
<h2><a href="/full_article.php">Ce este Lorem Ipsum?Ce este Lorem Ipsum?Ce este Lorem Ipsum?</a></h2>
<P>
Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. </p>
</div>
//html код блока
<?php
include 'db.php';
$sql = "SELECT title, text, autor, date, img_url FROM blogbase ORDER BY date DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<div id="article">';
echo '<img src="'.$row['img_url'].'">';
echo '<h2><a href="/full_article.php">'.$row['title'].'</a></h2>';
echo '<p>'.$row['text'].'</p>';
echo '</div>';
//echo '<div id="article">'.'<img src="'.$row['img_url'].'">'.'<h2><a href="/full_article.php">'.$row['title'].'</a></h2>'.'<p>'.$row['text'].'</p>'.'</div>';
}
} else {
echo "0 results";
}
?>
Ключевое различие между вашим примером "как должно быть" и как получается заключается в длине строк. Как видно, во втором случае у вас используются очень длинные строки без пробелов. В такой ситуации обычным поведением является перенос строки в более широкую часть блока, а если строка все равно не влезает, то она "заходит" за края контейнера.
В связи с этим, если свои тестовые данные вы приблизите к более "реальному" варианту, добавив пробелы, то проблема исчезнет сама собой.
Также для принудительной разбивки длинной строки и ее переноса следует использовать css-стили overflow-wrap: break-word; (CSS3) и более старую версию word-wrap: break-word.
В CSS3 также добавлено свойство hyphens, отвечающее за расстановку дефисов при переносе строк, однако, оно поддерживается не всеми браузерами.
зы: как видно привязка к mysql и php в вашем вопросе не корректна, измените тэги и заголовок вопроса.
зы2: если выводите несколько таких блоков на странице, то измените id="article" на class="article"
зы3: разделяйте логику и представление в коде, используйте шаблоны, не генерируйте html-код посреди пхп-кода.
.article {
width: 100px;
border: 1px solid red;
margin: 10px
}
.wbreak {
word-wrap: break-word;
}
<div class="article">
longtextlongtextlongtextlongtextlongtextlongtext
</div>
<div class="article wbreak">
longtextlongtextlongtextlongtextlongtextlongtext
</div>
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости