Link text larger than parent

Question

I have a div, and inside that div is a link

<div class="something">
<a href="#">Databases</a>
</div>

The problem is that when I set the width of my div, smaller then the width that the text of the link is. the text of the link just goes outside of the parent div.

What I want is that the text breaks to a new line.

How can I fix this ?

score 4 · Answer 1 · answered Aug 30 '13 at 15:08

4

Use the CSS word-break rule.

a {
    word-break:break-all;
}

jsFiddle example

answered Aug 30 '13 at 15:08

j08691

204,283
31
260
272

Sachin · Answer 2 · 2013-08-30T15:15:01.870

4

Try this

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

JsFiddle Demo

edited Aug 30 '13 at 15:15

answered Aug 30 '13 at 15:08

Sachin

40,216
7
90
102

score 1 · Answer 3 · edited Apr 10 '15 at 09:50

You should use the word-break property on the anchor <a> tag.

a{
    word-break: break-all;
}

As this documentation explains, this will work since

In addition to ‘normal’ soft wrap opportunities, lines may break between any two letters (except where forbidden by the ‘line-break’ property). Hyphenation is not applied.

This will force the word to split whenever the text reaches the boundary of the container, breaking onto a new line.

score 0 · Answer 4 · answered Aug 30 '13 at 15:10

0

You can use CSS to tell the browser to break the word down as it would multiple words:

.something{word-wrap: break-word;}

answered Aug 30 '13 at 15:10

jacob21

171
4
16

score 0 · Answer 5 · answered Aug 30 '13 at 15:10

.something a {
    /* see http://stackoverflow.com/a/7256972/315935 for details */
    word-wrap: break-word;      /* IE 5.5+ and CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    overflow: hidden;
    height: auto !important;
    vertical-align: middle;
}

Link text larger than parent

5 Answers5