如果达到div的宽度，则自动移动到下一行的文本

Question

如果达到div宽度，我希望文本移动到下一行 这是使用echo。这就在里面 div id =“chat”

echo '<div style="width: auto; margin-left: 400px; margin-bottom: 5px; margin-top: 10px; padding-left:8px; padding-bottom: 10px; padding-top: 10px; padding-left: 15px; text-align:left; font-size: 0.8em; color:#015E7D;">' . '<div style="font-weight:bold;">' . "You" . "</div>message: " . $messages->msg . "<br>" . '<div style="font-size: 0.6em;">' . "Send : " . $messages->dt . "</div>" . "</div>";

@squaleLis suggesstion输出

Answer 1

我需要将width（或max-width）放入容器div。

然而，文本剪辑是正常行为。也许你的css会覆盖它。因此，我建议您添加text-overflow和white-space规则。

片段：

＆＃13;

＆＃13;

div {
  max-width: 100%;
  height: auto;
  text-overflow: clip;
  white-space: normal;
}

＆＃13;

<div>
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un’ampia costiera dall’altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all’occhio questa trasformazione, e segni il punto in cui il lago cessa, e l’Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l’acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni. 
</div>

＆＃13;

＆＃13;

＆＃13;

修改

我不清楚你是否也想要破词（所以不用等待空格）。您需要的属性为word-break，设置为break-all。

Answer 2

根据我的假设，当文本接触div的宽度时，你希望文本出现在下一行。为此，你必须使用“word-wrap：break-word”

HTML

<div class="test">aaaa sdfjdshfjsd djhsdjs aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

CSS

.test{width:200px;border:1px solid blue;word-wrap:break-word;}

以下是您https://jsfiddle.net/Rit_Design/0L5wb62r/

的实例