jquery - CSS样式步骤

Question

我在 Bootstrap 中使用 Jquery 步骤。我创建了自定义 CSS 来设置步骤列表的样式。

我的CSS是

.steps li {
    padding: 7px 4px 10px;
    margin-right: 5px;
    background: #dedede;
    position: relative;
    display: inline-block;
}
.steps li:before {
    width: 0;
    height: 0;
    border-top: 17px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.steps li:after {
    width: 0;
    height: 0;
    border-top: 18px inset transparent;
    border-bottom: 17px inset transparent;
    border-left: 20px solid #dedede;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}
.steps .badge {
    margin: 0 2px 0 19px;
    position: relative;
    top: -1px;
}

还有，我的部分步骤列表，

1)

<p>Correct</p>
<div class="steps">
<ul>
    <li role="tab" class="disabled" aria-disabled="true">
    <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
        <span class="badge">3</span> Review Contributors
    </a>
    </li>
</ul>
</div>

2)

<p>Wrong</p>
<div class="steps">
<ul>
    <li role="tab" class="disabled" aria-disabled="true">
        <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
            <span class="badge">3</span> Review<br/> Contributors
            </a>
    </li>
</ul>
</div>

在这里，第一个工作正常。但是第二个由于 <br/> 而破坏了样式在 Review<br/> Contributors .请看我的Fiddle .我想做的是，如果文本长度太长，我想用相同的样式打断文本。怎么做？我试过 display:table特性。但它不起作用。

我用过 <br/>以减小尺寸。但我需要与 1) 相同的结果。我是否需要使用任何其他而不是 <br/>

Answer 1

试试这个，see fiddle

<p>Correct</p>
<div class="steps">
    <ul>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
            <span class="badge">3</span> Review Contributors
        </a>

        </li>
    </ul>
</div>
<p>Wrong</p>
<div class="steps">
    <ul>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
    </ul>
</div>

和CSS

.steps li {
    margin-right: 2px;
    background: #dedede;
    position: relative;
    display: inline-block;
    width:11.5%;
    font-size:12px;
    padding:20px 0 10px 10px;
    text-align:center;
}
.steps li:before {
    width: 0;
    height: 0;
    border-top: 41px inset transparent;
    border-bottom: 40px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content:"";
    top: 0;
    left: 0;
}
.steps li:after {
    width: 0;
    height: 0;
    border-top: 41px inset transparent;
    border-bottom: 40px inset transparent;
    border-left: 20px solid #dedede;
    position: absolute;
    content:"";
    top: 0;
    right: -20px;
    z-index: 2;
}
.steps .badge {
    margin: 0 2px 0 19px;
    position: relative;
    top: -3px;
}