PHP中的自动换行

Question

Here in content-full class I have used word-wrap: break-word; still the text do not appear in proper format?What could be the possible solution to it?Is there some way to get a proper format so as to Allow long words to be able to break and wrap onto the next line.But wierd part is that for content-short word-wrap:break-word is working!

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>";  
?>  

and the styling for content-full

<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

UPDATE :

if it is external , it will be like :

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

the parent div bypass this div style , try to change the style of parent div like the following :

change this line :

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

by this :

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

it will inherit your mentioned div

Answer 2

Is this what you want to accomplish? https://jsfiddle.net/9s2zr7gL/ If so, just add this to your current CSS:

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

You also need to add "lang=en" as a parameter in your div. Otherwise it won't work in firefox. If your text is not in English, check if the language is supported: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Answer 3

i encountered the same problem you i am using a text from docx file and while uploading i used pre tags so then word-wrap do not work properly. if this is your case remove pre tags.