Ajax Tab Container with MultiLine Tab Headers

try using one of these two.

1. We can solve this problem with a single line in our css. here it is

.ajax__tab_default .ajax__tab_header /* this makes the tabs wrap*/ { 
    white-space: normal!important; } 

2. However, you can just put the following in your style sheet. Note that you do need all of them, and the !important.

.ajax__tab_default .ajax__tab_header {white-space:normal !important;}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

Images:-> 

Css for Ajax tab Container

<style>
/*Header*/
.Tab .ajax__tab_header
{
    color: #4682b4;
    font-family:Calibri;
    font-size: 14px;
    font-weight: bold;
    background-color: #ffffff;
    margin-left: 0px;
}
/*Body*/
.Tab .ajax__tab_body
{font-family: verdana,tahoma,helvetica;
        font-size: 10pt;
        border: 1px solid #999999;
        border-top: solid 1px #999999;
        padding: 8px;
        background: url(../images/skins/shiny/cream-header.png);
        background-color:#FFFFFF;
       
    /*border:1px solid #b4cbdf;*/
   /* padding-top:0px;*/
    border-radius: 20px 20px 20px 20px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
    color: #ffffff;
    background:url(../images/tab_container/tab_active.gif) repeat-x;
    height:20px;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
    color: #ffffff;
    background:url(../images/tab_container/tab_left_active.gif) no-repeat left;
    padding-left:10px;
}
.Tab .ajax__tab_active .ajax__tab_outer
{
    color: #ffffff;
    background:url(../images/tab_container/tab_right_active.gif) no-repeat right;
    padding-right:6px;
}
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab
{
    color: #000000;
    background:url(../images/tab_container/tab_hover.gif) repeat-x;
    height:20px;
}
.Tab .ajax__tab_hover .ajax__tab_inner
{
    color: #000000;
    background:url(../images/tab_container/tab_left_hover.gif) no-repeat left;
    padding-left:10px;
}
.Tab .ajax__tab_hover .ajax__tab_outer
{
    color: #000000;
    background:url(../images/tab_container/tab_right_hover.gif) no-repeat right;
    padding-right:6px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
    color: #666666;
    background:url(../images/tab_container/tab_Inactive.gif) repeat-x;
    height:20px;
}
.Tab .ajax__tab_inner
{
    color: #666666;
    background:url(../images/tab_container/tab_left_inactive.gif) no-repeat left;
    padding-left:10px;
}
.Tab .ajax__tab_outer
{
    color: #666666;
    background:url(../images/tab_container/tab_right_inactive.gif) no-repeat right;
    padding-right:6px;
    margin-right: 2px;
}
</style>

example tab view:-

Download Images:  Ajax_tab_Images.rar

add this css code to between <head></head> tag of page
then add class="tab" to your ajax tab container tag. like this

<ajaxToolkit:TabContainer ID="TabCon1" runat="server" ScrollBars="Auto"  CssClass="Tab">