Multiline Anchor Link CSS

Question

I need to make a anchor / link contain within its div / li and multiline.

Heres a JSFiddle to show what I mean http://jsfiddle.net/x5nPx/

<div class="locked-content">
  <ul>
    <li>
      <a>www.example.com/39083904398980/93943430943098438094/test/example/long/link/here</a>
    </li>
  </ul>
</div>

<style>
  .locked-content {
    background: purple;
    width: 200px;
    height: 400px;
  }
</style>

Cheers

This answer can be helpful too https://stackoverflow.com/a/5241448/1770571 — Salma Gomaa, Apr 20 '18 at 09:26

score 2 · Answer 1 · answered Jan 09 '13 at 15:15

2

Fiddle
You have to use the following css property-

word-wrap:break-word;

answered Jan 09 '13 at 15:15

svineet

1,859
1
17
28

score 1 · Accepted Answer · answered Jan 09 '13 at 15:19

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Via: http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Multiline Anchor Link CSS

2 Answers2