My breadcrumbs break when I enter a long text. Any suggestions on how to fix this issue?
Feel free to check out this Fiddle for reference: 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;}