пытаюсь вывести на страницу в отдельные блоки данные из таблицы, но если текст немного длиннее то все идёт в одну строку как будто игнорит 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Всем доброго дняЗадача состоит следующая - хочется проверить url, и если человек использует анонимайзер (будет расхождение в хосте) сделать...
Хочу поменять копирайт в админке magento2x, но переопределение не происходит
вызываю функцию get_template_directory() и получаю путь D:\OpenServer\domains\wplocal/wp-content/themes/ как видно имеем "/" и "\", не могу найти как их настроить, для пути до корневой...