文字越过<div>

时间:2017-01-07 21:29:10

标签: html css

用户将消息插入数据库,然后我选择消息并执行回显以将消息放入div中。 由于某种原因,文本越过div的右边界

我尝试使用blockquote,它使用了W3Schools在那里的随机文本,当我将回声放入blockquote时,无论如何都会发生。见印刷品:

enter image description here

代码中的部分:

<?php
$sql_post = "SELECT `dataTopico`,`username`,`titulo`,`mensagem` FROM `".$bd."` WHERE `idTopico`='$id_topico'";
$exePost = mysql_query($sql_post);
$post=mysql_fetch_array($exePost);
?>

<blockquote>
    WWF has been protecting the future of nature. The world 
    leading conservation organization, WWF works in 100 countries and is 
    supported by 1.2 million members in the United States and close 
    to 5 million globally.
</blockquote>

<blockquote>
    <?php echo $post['mensagem'];?>
</blockquote>

查询是对的;它获得测试消息,但文本越过边界。我希望它像上面的文字一样下去。

1 个答案:

答案 0 :(得分:2)

对于具有CSS word-wrap属性的容器,您可以打破一个太长的单词。

blockquote {
  width: 200px;
  border: 1px solid black;
}

.solution {
  word-wrap: break-word;
}
Blockquote with default word-wrap value (normal):

<blockquote>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</blockquote>

Blockquote with the word-wrap property set to break-word:

<blockquote class="solution">  
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</blockquote>