CODEWITHSUNDEEP
htmlcss
user594166
user594166

Reputation:

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 text 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.

Upvotes: 4

Views: 25512

Answers (8)

Hamza Atef
Hamza Atef

Reputation: 31

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>

Upvotes: 1

Tanzer
Tanzer

Reputation: 320

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.

Upvotes: -1

corentin_chap
corentin_chap

Reputation: 73

Add

overflow-wrap: break-word;

to the CSS

Upvotes: 7

David Augustus
David Augustus

Reputation: 420

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 .

Upvotes: 1

Amir Raminfar
Amir Raminfar

Reputation: 34149

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.

Upvotes: 2

Infotekka
Infotekka

Reputation: 10423

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/

Upvotes: 5

looneydoodle
looneydoodle

Reputation: 369

Add

white-space:wrap;

to the style. That should do the trick.

Upvotes: 0

jonezy
jonezy

Reputation: 1923

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>

Upvotes: 4

Related Questions