I'm developing a mobile site and I'm having a problem, when I have a very large link (no spaces or '-' hyphens), it does not "break" and leaks out of the layout. Is there a way to fix this?
I'm developing a mobile site and I'm having a problem, when I have a very large link (no spaces or '-' hyphens), it does not "break" and leaks out of the layout. Is there a way to fix this?
You can use the word-wrap
property to manipulate word wrap
<style>
p.test {
width: 100px;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
You can check the result here
text-overflow
to prevent text from having to be broken
<style>
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
</style>
<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>
<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>
<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>
You can check the result here