cssのタブメニューです。次のリンクで画像を確認できるように、1つのタブに長い名前を書いてみました。
これは元の1つです:
cssで変更したとき
.tabs {width:100%;overflow:auto;}
.tabs li {float:left;padding-right:1px;}
.tabs .end {padding:0}
.tabs a {display:block;width:66px;font-size:13px;line-height:31px;color:#fff;text-transform:uppercase;text-align:center;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;behavior:url(js/PIE.htc);position:relative;background:url(../images/tabs_bg.gif) bottom repeat-x #3081c8;text-decoration:none;p}
.tabs a:hover, .tabs .active {background:url(../images/bg_form.gif) repeat}
.tabs_cont {border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;behavior:url(js/PIE.htc);position:relative;background:url(../images/bg_form.gif) repeat;padding:30px 35px 28px;width:1000px;height:500px;}
これはHTMLです
<ul class="tabs">
<li><a href="#" id="changeText">inclusive Class</a></li>
<li><a href="#" id="changeText2">inclusive Class</a></li>
<li><a href="#" id="changeText3">inclusive Class</a></li>
<li class="end"><a href="#" id="changeText5">inclusive Class</a></li>
</ul>
長いテキストで元のビットを表示する方法を教えてください。