Using div and table layout to create two column layout and cut text - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Table

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div Table

Description

Using div and table layout to create two column layout and cut text

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">
.flexer {<!--from w  w  w  .  j  a  va2 s  .c  o m-->
   display:table;
}

.long, .short {
   overflow:hidden;
   text-overflow:ellipsis;
   padding:11px;
   white-space:nowrap;
   display:table-cell;
}

.long {
   background:Chartreuse;
   max-width:351px;
}

.short {
   background:yellow;
}
</style> 
 </head> 
 <body> 
  <div class="flexer"> 
   <div class="long">
     test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
   </div> 
   <div class="short">
     Nothing to see here. 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials