2013-04-22 63 views
0

當我在我的麪包屑輸入一個長文本他們打破..任何想法?麪包屑代碼修復長文本

隨意撥弄: http://jsfiddle.net/neodjandre/pbEpG/

.breadsmall ul{margin:0px;} 
.breadsmall ul li{display:inline-block;height:20px;line-height:20px;width:100px;text-indent:10px;text-align:center;position:relative;margin:5px 1px 0 0;} 
.breadsmall ul li:before{content:" ";height:0;width:0;position:absolute;left:-2px;z-index:0;border-color:transparent transparent transparent #fff;border-style:solid;border-width:10px 0 10px 10px;} 
.breadsmall ul li:first-child:before{border-color:transparent;} 
.breadsmall ul li a:after{content:" ";height:0;width:0;position:absolute;right:-10px;z-index:10;border-color:transparent transparent transparent #e8e8e8;border-style:solid;border-width:10px 0 10px 10px;} 
.breadsmall ul li a{display:block;background: #e8e8e8;font-family:Century Gothic, sans-serif;font-size:1em;color:#666666} 
.breadsmall ul li a:hover{background:#1f1f1f;color:#eaeaea;} 
.breadsmall ul li a:hover:after{border-color:transparent transparent transparent #1f1f1f;} 
.breadsmall ul li.active a{background:#1f1f1f;z-index:100;color:#eaeaea;} 
.breadsmall ul li.active a:after{border-left-color:#1f1f1f;} 
+0

任何人都可以請告訴我如何粘貼代碼在stackoverflow ...使用Firefox - 我無法正確格式化,無論我做什麼.. :( – 2013-04-22 01:21:30

+0

我使用FireFox,並只使用四個空格之前代碼行,加上你想要的任何縮進。 – Alyce 2013-04-22 01:22:33

+2

突出顯示代碼,CTRL + K。我修好了。 – Doorknob 2013-04-22 01:22:54

回答

3

使用min-width: 100px;而不是width: 100px;<li>

.breadsmall ul li { 
    min-width: 100px; 
} 

是這樣的:http://jsfiddle.net/MRSallee/pbEpG/1/

那場比賽,你想要什麼?

+0

+1對於解決方案(和jsfiddle示例) – nickhar 2013-04-22 01:25:20

+0

是的,雖然我不介意在長文本的左側和右側填充更多的內容!不用擔心,我想通了......非常感謝: ) – 2013-04-22 01:51:29