Link to home
Create AccountLog in
Avatar of Jesper Christensen
Jesper Christensen

asked on

link max widrh

How can i defina that the link must break after 150px?

<div style="border:1px solid red; width:200px">
      <a href="#" style="max-width:150px; width:150px">osjdpfjsdpofksdopfksdopfksdpofsdfsdfsdfsdfsdfsdf</a>
</div>
Avatar of Sudaraka Wijesinghe
Sudaraka Wijesinghe
Flag of Sri Lanka image

If your text doesn't contain any white space characters it won't break/wrap down to next line.
However for block elements, you can define css overflow to hide or show scroll bars.
Avatar of Jesper Christensen
Jesper Christensen

ASKER

Ok thanks. Can it be done by c# or javascript?
ASKER CERTIFIED SOLUTION
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
It has to be done with CSS. Either by defining a class or specifying the it on the style attribute. Here are some examples.

<div style="border:1px solid red; width:200px">
      <a href="#" style="max-width:150px; width:150px">osjdpfjsdpofksdopfksdopfksdpofsdfsdfsdfsdfsdfsdf</a>
</div><br />

<div style="border:1px solid red; width:200px">
      <a href="#" style="max-width:150px; width:150px; overflow:hidden; display:block;">osjdpfjsdpofksdopfksdopfksdpofsdfsdfsdfsdfsdfsdf</a>
</div><br />

<div style="border:1px solid red; width:200px">
       <a href="#" style="max-width:150px; width:150px; overflow:auto; display:block;">osjdpfjsdpofksdopfksdopfksdpofsdfsdfsdfsdfsdfsdf</a>
 </div><br />

<div style="border:1px solid red; width:200px; overflow:hidden;">
        <a href="#" style="max-width:150px; width:150px;">osjdpfjsdpofksdopfksdopfksdpofsdfsdfsdfsdfsdfsdf</a>
  </div><br />

<div style="border:1px solid red; width:200px; overflow:auto;">
         <a href="#" style="max-width:150px; width:150px;">osjdpfjsdpofksdopfksdopfksdpofsdfsdfsdfsdfsdfsdf</a>
   </div><br />

Open in new window

Thank you guys for answers.
This solution worked for me:
<div style="border:1px solid red; width:200px;word-wrap:break-word;">
      <a href="#" style="max-width:150px; width:150px">osjdpfjsdpofksdopfksdopfksdpofsdfsdfsdfsdfsdfsdf</a>
</div><br />