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>