我已经尝试了几乎所有的方法，包括自动换行、文本换行等，但无法做到这一点。我有一个简单的网页，它加载带有少量参数的通知并在一个简单的框架中显示它们。
框架设计和其他一切都是响应式的，只是从数据库加载的文本不会随着屏幕尺寸而中断，因此也不允许背景框架缩小。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<style>
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
#notice {
padding: 0 10px;
border-radius: 10px;
width: auto;
height: auto;
font-family: Tahoma, Verdana, Arial;
font-size: 11pt;
background-color: #7bb9e0;
}
.date, .valid, .class {
font-style: italic;
font-size: 10pt;
text-align:left;
display: block;
}
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
#notice {
padding: 0 10px;
border-radius: 10px;
width: auto;
height: auto;
font-family: Tahoma, Verdana, Arial;
font-size: 11pt;
background-color: #7bb9e0;
}
.date, .valid, .class {
font-style: italic;
font-size: 10pt;
text-align:left;
display: block;
}
}
/*Desktop*/
@media screen and (min-width: 1060px) {
#notice {
padding: 0 10px;
border-radius: 10px;
width: 600px;
height: auto;
font-family: Tahoma, Verdana, Arial;
font-size: 11pt;
background-color: #7bb9e0;
}
.date, .valid, .class {
padding-right: 40px;
font-style: italic;
font-size: 10pt;
}
}
.title, .notice, .notice-footer {
padding-top: 10px;
#padding-left: 10px;
padding-bottom: 10px;
}
p
{
width: 100%;
text-wrap:normal;
overflow-wrap:break-word;
}
.title {
border-bottom: 1px solid #000;
font-weight: bold;
}
.notice-footer {
border-top: 1px dashed #000;
padding-top: 2px;
text-align: center;
}
div.ui-datepicker{
font-size:12px;
}
</style>
<?php
echo "<div id=\"notice\">";
echo "<div class=\"title\">".$title."</div>";
echo "<div class=\"notice\"><p>".$new."</p></div>";
echo "<div class=\"notice-footer\">";
echo "<span class=\"date\"><font color=\"CC0000\">Posted on: </font> ".$pdat."</span>";
echo "<span class=\"valid\"><font color=\"CC0000\">Valid within: </font>".$sdat." - ".$edat."</span>";
echo "<span class=\"class\"><font color=\"CC0000\">Class Year: </font>".$row['class']."</span>";
echo "</div>";
echo "</div><br><br>";
?>
现在只要 $new 包含一条大线，它就不会根据屏幕尺寸中断，因此背景 #notice 框架也将与该线一样长，并且不会再像 if 那样缩小那里不会排长队。
示例快照:
如果我调整浏览器的大小，背景框只会缩小到“网站”这个词
最佳答案
显然 PHP 是经过预处理的，因此通过查看它输出的标准 HTML，我们可以开始理解问题所在。
从数据库中提取的内容中的所有空格实际上都是 HTML 空格字符 ( ) 而不是空白。这意味着每一位数据都被解释为一个非常长的字符串，而不是单独的单词。在最长的一行中，HTML 如下所示:
List of Mentors for B.E. First Year Students (Section wise) has been uploaded on the college website.
而不仅仅是:
"List of Mentors for B.E. First Year Students (Section wise) has been uploaded on the college website."
这就是为什么您一直在应用的所有自动换行属性都有效的原因。从技术上讲，只有一个词!
因此，我建议您在回显代码时尝试使用 htmlspecialchars_decode()。例如:
echo "<div class=\"title\">". htmlspecialchars_decode($title) ."</div>";
一个更好的解决方案是首先尝试找出为什么将带有这些特殊字符的代码插入到数据库中，但这超出了这个问题的范围，所以这可能是一个解决方案。
关于html - 为动态内容做响应换行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20031657/