带有php echo的文本溢出div

Posted 2023-03-06

【中文标题】带有php echo的文本溢出div

【英文标题】：text overflowing div with php echo

【发布时间】：2020-06-07 16:11:02

【问题描述】：

我正在制作我的第一个全栈项目。我做了这个博客，你可以在上面发帖和评论，所有的帖子和cmet都存储在mysqli数据库中。

为了在加载页面时获取数据库中的所有数据，我使用 php 将所有这些数据存储在一个数组中，然后在网页上回显这些数据。

它在页面上设置、获取和显示数据的部分很好。但是，当我从数组中回显数据（从数据库表中获取数据）时，文本会溢出我的 div……我用 CSS 和引导程序尝试了所有方法，但它不起作用。

我不知道为什么，我尝试了很多东西，但过去 2 天我一直卡在这个问题上。

请原谅我代码的不良做法，我是初级，主要是前端。这是我第一次尝试全栈项目，所以我在编写代码时自己学习。

 <?php foreach($datas as $value): ?>

<?php 


$id = $value['id'];
echo $id;

$imgSrc = $value['image'];

echo
"<div class='container-fluid' style='text-align: center; padding: 5% '>
<div class='row'>
<h1 id='titlePost' class='col-md-8 mx-auto'>" . $value['title'] . "</h1>".
"<hr class='w-50' style='height: 6px; background-color: #03fc84 !important;  margin-left: auto; margin-right: auto;'>".
"
<div class='row col-12'>
<img src='$imgSrc' class='img-fluid col-md-4 mx-auto'>
</div>

<div class='container-fluid'>
 <div class='row col-12'>
    <p class='col-md-8' >" . $value['description'] . "</p>
</div>
</div>
".
    "<p style='color: black;  background-color: #03fc84;' class='w-50 mx-auto'>" . $value['date'] . "</p>".
    
    
    "<div class='container-fluid'>
    <div class='row col-md-12'>
    <form action='".setComments($conn, $id, $sessionComments)."' method='post' enctype='multipart/form-data' class='col-md-8 mx-auto'>
    
    <input name='comments' type='text' class='form-control' id='exampleFormControlInput1' >
    

选择要上传的图片：

<button type='submit' name='commentSubmit$id'  id='btnSend' class='w-25 mx-auto btn btn-primary'>Comment
<i class='fas fa-paper-plane' style='font-size: 2.5rem; color : #ff6016; display: inline-block;'></i>
</button>

    
    </form>
    ".

"
</div>
</div>
</div>
</div>"; 

// afficher les commentaires
getComments($conn, $commentsArray, $id);


?>




<?php endforeach ?>

【参考方案1】：

您可以查看this link，它解释了如何使 div 高度取决于其内容，同样的事情可以与width 属性一起使用（显然它取决于您编写的代码）。

否则，如果您不喜欢这个解决方案，我不得不问您是否尝试过overflow-x: scroll;（宽度溢出）和/或overflow-y: scroll;（高度溢出）：这些属性以及这些值允许您调整具有指定大小的 div（例如：width: 100px 或 width: 100px），以便能够滚动其内容。

希望我能帮助您解决此问题。 顺便说一句，我想给你一个关于这个社区的提示：为了更快更好地回答问题，你也应该提供 CSS 代码。

【讨论】：

我试过了，可惜没用。即使是内联样式或在半列之前添加 !important。

感谢帮助的哥们，我一直在寻找，我发现用php，当你尝试回显来自字符串的文本时，你必须添加以下css：

分词：断词；所以这会尽可能多地破坏你的字符串以使其适合你的 div