CODEWITHSUNDEEP
css
ajsie
ajsie

Reputation: 79686

link text sticks out of the div

to make it simple, i've got following code:

<div>
     <a>view all your links</a>
</div>

the width of the div is very small so the text "all your links" sticks out of the div. how do i do to have a new line after "all your" so "links" dont stick out?

Upvotes: 4

Views: 4210

Answers (4)

Savoo
Savoo

Reputation: 963

Use this code:

a {
    word-wrap: break-word;
    white-space: normal;
}

Upvotes: 0

Matt
Matt

Reputation: 85

If you want to break links visually so they don't extend out of a div, you can add word-wrap: break-word to a in your stylesheet. Thus:

a {
    word-wrap: break-word;
}

Upvotes: 6

ghoppe
ghoppe

Reputation: 21784

Use the max-width property for your a links.

Edit: You'll likely need a display: block for your a tag as well.

Upvotes: 1

ithcy
ithcy

Reputation: 5589

You have not specified your desired result. Do you want the div to resize to accomodate the entire width of the links? If so, don't put a fixed width on it or any of its ancestor elements. Do you want the overlong links to be cut off? If so, put overflow: hidden in the style of the div.

Upvotes: 2

Related Questions