Question

我已经尝试了几乎所有内容，包括自动换行，文本换行等，但却无法实现。我有一个简单的网页，它可以加载带有少量参数的通知，并将它们显示在一个简单的框架中。

框架设计和其他所有内容都是响应式的，只是从db加载的文本不会破坏屏幕大小，因此也不允许背景框架缩小。

以下是代码：

<!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框架也会与线条一样长，并且不会再像以前那样缩小长线不会在那里。

示例快照： enter image description here

如果我要调整浏览器的大小，背景框架只会收缩到“网站”这个词

Answer 1

显然PHP已经过预处理，因此通过查看输出的标准HTML，我们可以开始了解问题。

从数据库中提取的内容中的所有空格实际上都是HTML空格字符（ ），而不是空格。这意味着，不是单独的单词，而是将每一位数据解释为一个非常长的字符串。在最长的行中，HTML看起来像这样：

List&nbsp;of&nbsp;Mentors&nbsp;for&nbsp;B.E.&nbsp;First&nbsp;Year&nbsp;Students&nbsp;(Section&nbsp;wise)&nbsp;has&nbsp;been&nbsp;uploaded&nbsp;on&nbsp;the&nbsp;college&nbsp;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>";

更好的解决方案是尝试找出为什么代码被插入到数据库中，并且首先使用这些特殊字符，但这超出了本问题的范围，因此这可能是一个解决方案。

为动态内容制作响应式换行符？

1 个答案: