CODEWITHSUNDEEP
jqueryhtmlcss
Guru
Guru

Reputation: 327

Text crossing more than max-width in html

I have set max-width to the div as 500px, but the text inside the div tag crossing the width and continuing instead of getting to next line.

Please help what code has to be changed.

Below is my code place:

div set to 500px

p tag containing text inside div. It crossing more than 500 px instead of getting to next line.

I know its little basic but i have no clue how to make it. Please help.

Upvotes: 2

Views: 768

Answers (4)

Magicprog.fr
Magicprog.fr

Reputation: 4100

Set to your paragraph a word-wrap: break-word:

p {
    word-wrap: break-word;
}

Example: 

.container {
    max-width: 500px;
}
.container > p {
    word-wrap: break-word;
}
<div class="container">
    <p>LoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitametLoremsitamet</p>
</div>

http://jsfiddle.net/ro3yfede/

Upvotes: 1

Niki van Stein
Niki van Stein

Reputation: 10724

You need to use css word-wrap so long text (links, long words etc) do not move outside your div.

word-wrap: break-word;

possible options are: normal|break-word|initial|inherit

You can also set overflow:hidden to prevent content that is going outside the boxes to be visible.

Upvotes: 1

NinjaOnSafari
NinjaOnSafari

Reputation: 1016

Here is a the demo

Add this line to your css: 

word-wrap: break-word;

Upvotes: 1

dgarbacz
dgarbacz

Reputation: 962

No need to set a width on your paragraph tag. The width will be contained to the parent <div>.

Example here http://jsfiddle.net/statzx2m/

Upvotes: 1

Related Questions