text goes out of paragraph css html

I have text inside a paragraph

<p style="width:200px;">Text goes here</p>

My problem is that when the tex开发者_如何学编程t grows (bigger width), it doesn't go to a new line. Instead, the text goes out of the paragraph. How can I force the text to continue on a new line if it grows.

Add

overflow-wrap: break-word;

to the CSS

I believe that there is more to this than just that p tag. I recommend you look at your css for the site and see if something is changing either the overflow or word-wrap attributes.

http://www.css3.com/css-word-wrap/

http://www.css3.com/css-overflow/

remove the width on the p tag sir.

<p>Text goes here.</p>

If you can't remove the width try adding the white-space attribute

<p style="width:200px;white-space:pre;>Lot's of text here that will be wider than 200px</p>

By default overflow is auto which should should make it go to the next line. Perhaps somewhere else you set overflow: hidden; which is why it does that. Try setting overflow:auto again.

You need to use CSS3 : word-wrap: break-word; Because if you have a long word in the paragraph it will always get out of the element, for example : try

<p style="width:100px;"> loremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsum </p> 
<p style="width:100px; word-wrap:break-word;"> loremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsum </p> 

Overflow will make the text invisible .

Add

white-space:wrap;

to the style. That should do the trick.

Using the CSS word-break property is one way to do it:

<p style="word-break:break-all; width:200px;">
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

Because almost all elements in HTML are boxes , you can fix your "p tag" into its div like this

<p style="position:relative; width:95%; height:whatever%;" > content </p>

You can also achieve text-indention by positioning the box using "css left or right" property.

<p style="position:relative; width:95%; height:whatever%; left:20px;" > content </p>

Note : Do not forget "css position property" before positioning any box.