PHP中的自動換行

Question

在內容完整的課程中，我使用了自動換行：break-word; 仍然沒有以正確的格式顯示文本嗎？可能的解決方案是什么？是否有某種方法來獲取正確的格式以便允許長單詞能夠折斷並換行到下一行。對於內容簡短的自動換行：斷行有效！

echo "<div class='mainlayout' data-js-module='layout'>";
echo "<div class='grid' style='position: relative;'>";
include "mysql.php";
$query= "SELECT ID,Title,Summary,Content,ImgName,Image FROM content ORDER BY ID DESC";
$result=mysql_query($query,$db);
while($row=mysql_fetch_array($result)) {  
    echo "<div class='grid-item item1' style='position: relative; left: 240px; top: 0px; background: ".ran_col().";'>";           
    echo "<div class='content-short' style='position:relative;'>";
    $string = $row['Content'];
    if (strlen($string) > 200) {
        $trimstring = substr($string, 0,200). '...';
        } 
        else {
            $trimstring = substr($string,0). '...';
            }
    echo $trimstring;
    echo "</div>";
    echo "<div class='content-full'>";
    echo $row['Content'];
    echo "</div>";
    echo "</div>";
    }
mysql_close($db); 
echo "</div>";
echo "</div>";  
?>  

以及完整內容的樣式

<style type="text/css>
    .content-full{
        border: 1px;
        border-radius: 5px;
        word-wrap: break-word;
        width: 100%;
        height: 100%;
        padding: 5px 5px 5px 10px;
        overflow-y: auto;
        float: left;
        background: white;}
    .content-short {
        float: left;
        position: relative;
        border: 1px;
        border-radius: 5px;
        margin: 10px 0 0 10px;
        padding: 10px 0 10px 10px;
        word-wrap: break-word;
        height: auto;
        width: 200px;
        background: White;}
</style>

Answer 1

更新：

如果是外部的，它將像：

<link rel="stylesheet" type="text/css" href="pathto.css">

父div繞過此div樣式，請嘗試更改父div的樣式，如下所示：

更改此行：

 echo "<div class='grid-item item1' style='position: relative; left: 240px; top: 0px; background: ".ran_col().";'>";

這樣 ：

 echo "<div class='grid-item item1' style='position: relative; word-wrap: break-word; left: 240px; top: 0px; background: ".ran_col().";'>";

它將繼承您提到的div

Answer 2

這是您要完成的嗎？ https://jsfiddle.net/9s2zr7gL/如果是這樣，只需將其添加到當前CSS中即可：

-ms-word-break: break-all;
 word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

您還需要在div中添加“ lang = en”作為參數。 否則，它將無法在Firefox中使用。 如果您的文字不是英語，請檢查是否支持該語言： https : //developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Answer 3

我遇到了同樣的問題，您正在使用docx文件中的文本，並且在上載時使用了預標簽，因此自動換行功能無法正常使用。 如果是這種情況，請刪除前置標簽。