BootStrap 3进度条标签截止

时间：2017-03-06 21:40:45

标签： html css twitter-bootstrap

我正在尝试创建一个进度条，无论进度条的大小如何，文本都会完全显示。我不确定要添加哪些选项，以便Java Application Development下的span的文本可以大于进度条本身。

＆＃13;
＆＃13; 
.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}

.header {
    text-align: center;
    line-height: 4px;
}

.name {
    text-transform: uppercase;
    font-size: 32px;
}

.summary h2, .skills h2, .professionalhistory h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
}

.skills {
    line-height: 13px;
}

.skills p {
    margin: 8px 8px 8px 8px;
}

.progress {
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}

.progress span {
    display: inline;
    position: absolute;
    color: black;
}

.progress-bar {
    text-align: left;
    position: relative;
    line-height: 13px;
    padding: 0px 10px;
}

.progress-bar span {
    display: inline;
}
＆＃13; 
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<div class="skills" style="line-height: 13px;">
    <h2 style="text-align: center; text-transform: uppercase; font-size: 24px;">Possesses Advance Knowledge Of</h2>
    <div class="row">
        <div class="col-lg-4">
            <p style="margin: 8px 8px 8px 8px;">Java Application Development</p>
            <div class="progress" style="text-align: left; position: relative; height: 13px; margin: 8px 8px 8px 8px;">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:7.69%; padding: 0px 10px;">
                    <span style="display: inline;">1 Years</span>
                </div>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

一种可能的解决方案如下。这就是改变了

.progress-bar span {
        position: absolute;
        z-index: 2;
        color: black;
        top: 50%;
        left: 0%;
        transform: translate(0%,-50%);
}


.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}

.header {
    text-align: center;
    line-height: 4px;
}

.name {
    text-transform: uppercase;
    font-size: 32px;
}

.summary h2, .skills h2, .professionalhistory h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
}

.skills {
    line-height: 13px;
}

.skills p {
    margin: 8px 8px 8px 8px;
}

.progress {
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}

.progress-bar {
    text-align: left;
    line-height: 13px;
    padding: 0px 10px;
}

.progress-bar span {
    position: absolute;
    z-index: 2;
    color: black;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<div class="skills">
    <h2>Possesses Advance Knowledge Of</h2>
    <div class="row">
        <div class="col-lg-4">
            <p>Microsoft Operating Systems</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Microsoft Office SharePoint Services</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%">
                    <span>7 Years</span>
                </div>
            </div>
            <p>Microsoft Active Directory</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Microsoft Exchange Services</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Microsoft Office Suite</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Cisco Networking Devices</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>VMWare Products</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <p>Project Management</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:38.46%">
                    <span>5 Years</span>
                </div>
            </div>
            <p>Personnel Management</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
            <p>Training and Development</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
            <p>Customer Service Relations</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:61.54%">
                    <span>8 Years</span>
                </div>
            </div>
            <p>Performance Management</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
            <p>Oral Expressive</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Critical Thinker</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%">
                    <span>13 Years</span>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <p>Complex Problem Solver</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Attention to Detail</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Sandler Sales Concepts</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:23.08%">
                    <span>3 Years</span>
                </div>
            </div>
            <p>Visual Basic for Applications</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
            <p>Java Application Development</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:7.69%">
                    <span>1 Years</span>
                </div>
            </div>
            <p>Microsoft Visual Studio</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:84.62%">
                    <span>11 Years</span>
                </div>
            </div>
            <p>Microsoft SharePoint Designer</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:38.46%">
                    <span>5 Years</span>
                </div>
            </div>
        </div>
    </div>
</div>

相关问题
最新问题