I want the text to move next line if the div width is reach This is using echo. This is inside that 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 output

I want the text to move next line if the div width is reach This is using echo. This is inside that 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 output

• javascript
• css

Share Improve this question Follow edited Jan 27, 2016 at 9:20 DumDumDummy asked Jan 27, 2016 at 8:41 DumDumDummyDumDumDummy 8111 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

As per my assumption you want the text to e in the next line when it touches the width of the div. For this you have to use "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;}

Here is a live example for you https://jsfiddle/Rit_Design/0L5wb62r/

I need to put a width (or a max-width) to the container div.

However text clip is the normally behavior. Maybe your css overwrite it. So I suggest you to add also the text-overflow and white-space rules.

SNIPPET:

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

<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 rinincia, 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>

---

EDIT

It was not clear to me that you want also break word (so without waiting for white space). The property you need is word-break, set to break-all.