Break line on links

0

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?

    
asked by anonymous 16.09.2014 / 19:43

1 answer

2

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

or

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

    
17.09.2014 / 00:02