在 div 中换行时出错

Posted 2023-03-05

【中文标题】在 div 中换行时出错

【英文标题】：Error when wrapping text in a div

【发布时间】：2012-09-10 01:16:14

【问题描述】：

你能告诉我为什么在下图中varun09 之后有一个中断吗？这有点奇怪，因为只有当语句大于<div> 的实际宽度时才会发生这种情况，我想知道如何换行？我想要垂直滚动选项，而不是水平滚动条。

我正在通过 php 用 mysql 数据填充<div>。

代码是：

while ($row = mysql_fetch_assoc($query_run)) 
    echo '<p>'.$row['user_name'].' '.$row['chat_body'].'</p><br> ';

【问题讨论】：

将br 包装在<p> 标记中时，您不需要它。同时向<p class="user_comments" 添加一个类并设置该属性的样式。

word-wrap: break-word; 将完成这项工作

它现在正在包装，但为什么它仍然打破这条线？？

【参考方案1】：

您可以使用自动换行属性：

selector 
    word-wrap: break-word;
 

【参考方案2】：

jsBin demo

为您的元素使用 CSS 属性 word-wrap：

word-wrap: break-word;

【参考方案3】：

您需要设置空格以便它为您换行，但 varun09 之后的空格会导致下一个进入下一行。试试这个组合：

jsFiddle Demo

p  word-wrap: break-word; white-space:pre; ​

Info on white-space here

【讨论】：

谢谢，但知道为什么它在 varun09 之后仍然断线吗？

white-space:pre（修复换行符）和 white-space:normal（包装文本）正在工作，但我不能一起使用它们，并且 word-wrap:break-单词;不工作....

很遗憾，它只适用于较新的浏览器，您使用的是哪一个？

是的，你是对的，它在 chrome 上工作而不在 mozilla 上工作，即有什么建议让它也能在旧浏览器上工作？