Link text larger than parent - html

Question

I have a div, and inside that div is a link
<div class="something">
Databases
</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 ?

Answer 1

Use the CSS word-break rule.
a {
word-break:break-all;
}
jsFiddle example

Answer 2

Try this
a{
white-space: pre-wrap;
word-wrap: break-word;
}
JsFiddle Demo

Answer 3

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.

Answer 4

You can use CSS to tell the browser to break the word down as it would multiple words:
.something{word-wrap: break-word;}

Answer 5

.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;
}