Venkat's Planet

We see in many places the label values or some other places that the text is very long. If the text is too long it wraps to the new line. But if you dont want text to wrap to new line and show ellipsis. This below CSS style will help you. Eg: <p class="ellipsisStyles"> This is an example to show the usage of long text with ellipsis </p> If you want this text not to be wrapped and to be showed as "This is an example to ..." with ellispsis. .ellipsisStyles{      text-overflow:ellipsis;      overflow:hidden;      width:100px;      whitespace: no-wrap; }

For every website the navigation menu plays a key role. This navigation menu should be in clear and precise. To make the navigation menu look better even in the lower resolution we have to make them responsive by giving equal width to each item. Here is the procedure to make each menu item with equal width. To make all the elements having equal width and full width of the parent use as <ul>      <li>a</li>      <li>b</li>      <li>c</li>       <li>d</li> </ul> styles ul{ display:table; } li{ display:tabel-cell; float:none; text-align:center; }

There are Media Queries which help in making the website responsive. Here are some tips which will make easier to Understand the Media Queries to various devices Large Desktops : Layout Width will be from 1200px and Up               @media (min-width:1200px){                }   2.   Default : The Layout width will be from 980px and up   3.    Portrait Tablets : The Layout width will be from 768px and Above              @media (min-width:768px) and (max-width: 978px){               }   4.   Phones to Tablets: The Layout width will be from 767px and below             @media (max-width:767px){              }   5.   Phones :  The Layout width will be from 480px and below     ...