Wrapping long email addresses in small boxes - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Box

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Box

Description

Wrapping long email addresses in small boxes

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
li.c1 {<!--from   w  ww  . java  2s.co  m-->
   width:119px;
   list-style:none;
   margin-bottom:13px;
   background-color:Chartreuse;
}

li.c1 a {
   word-wrap:break-word;
   font-family:Verdana;
   font-size:12px;
}

li.c2 {
   width:119px;
   list-style:none;
   background-color:yellow;
}

li.c2 a {
   font-family:Verdana;
   font-size:12px;
   -webkit-hyphens:manual;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <li class="c1"> <a href="big.ass.email@address-is.extremely.lame.de">Lorem ipsum dolor sit amet, consectetur ad</a> </li> 
   <li class="c2"> <a href="big.ass.email@address-is.extremely.lame.de">Lorem ipsum dolor sit amet, consectetur adip</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials