Текст выходит ра замки дива как исправить?

Question

[ehoboli]

что только не делал, и white-space: normal; добавлял, так же word-wrap: break-word; тоже не хочет.
текст выходит за левую сторону дива. и не хочет переносится

.column {
text-align:center;
  box-shadow: 0 4px 18px 0 rgba(0,0,0,0.2);
 display:inline-block;
padding:5px;
width:200px;
white-space: normal;
margin:10px;
}

.column img 
{
  margin:2px;
}

.row
{
position: relative;
margin:0;
width:119%;
}

.row:after {
  content: "";
  display:table;
  clear: both;
  
}


.photo-hover {
  position: relative;
}

.photo-overlay  {
top:-189px;
left:-28px;
white-space: normal;
position:absolute;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Черный прозрачный */
  color: #f1f1f1; 
  width: 123%;
  height:165px;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 12px;
  padding: 10px;
  margin-top:5px;

}

.photo-hover:hover .photo-overlay {
  opacity: 1;
}

echo '<div class="row"> ';

while ($post = mysql_fetch_assoc($q))
{
echo '<div class="column">';

echo "<div class='photo-hover'><div class='photo-overlay'>";

echo "<div style='position:absolute;  right:60px; top:90px; font-size:15px;  color:green;'>";
echo'' .mb_strimwidth(esc(trim(br(bbcode(smiles(links(stripcslashes(htmlspecialchars($post['opis'])))))))), 0, 30).'';
echo "</div>";

echo "</div>";
echo "</div>";
echo "</div>";


}

echo "</div>";

Comments

[Ankhena]

Уберите echo и сделайте песочницу с видимой проблемой на codepen.io, потом позовите.

[ehoboli]

Ankhena, вот сделал пример https://codepen.io/noggan1990/pen/mdLOXZw

[Ankhena]

ehoboli, используйте word-break: break-word или word-break: break-all

Прошу прощения, сначала написала не то, о чем думала.

[ehoboli]

Ankhena, так я использовал, оно не помогло