2015-09-04 130 views
1

在我開始我的問題之前,我想說我已經看到過類似的問題。他們都說要麼將position:relative添加到從:after選擇刪除position:absolute容器,但他們都沒有爲我工作。溢出:隱藏和:在僞選擇器

這是我的fiddle

當我嘗試添加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;時,div右側的箭頭消失或:after選擇器消失。我不知道爲什麼會發生這種情況。

是什麼導致了問題,以及如何解決它?謝謝。

+0

請相關的代碼添加到這個問題爲好。 – Roope

+1

你想完成什麼?你還沒有真正清楚你的目標是什麼。 – leigero

回答

1

我不認爲,其可能通過CSS,如果你把你的HTML結構是這樣,最好讓你的HTML的微小變化

簡單,添加其他元素的p標籤內,並添加text-overflow CSS該元素,它解決所有您的問題

.skills { 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 
.skill { 
 
    height: 70px; 
 
    line-height: 70px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    font-size: 18px; 
 
    color: white; 
 
    font-family: 'Gotham-Medium'; 
 
    width: 100%; 
 
    position: relative; 
 
    margin-bottom: 20px; 
 
} 
 
.skill p { 
 
    display: block; 
 
    height: 100%; 
 
    line-height: 70px; 
 
    text-align: center; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 
.skill p span { /* added a new element, and wrapped it*/ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    display: inline-block; 
 
    width:100%; 
 
} 
 
.skill p:after { 
 
    left: 100%; 
 
    top: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    border-color: rgba(136, 183, 213, 0); 
 
    border-width: 35px; 
 
    margin-top: -35px; 
 
    z-index: -1; 
 
} 
 
.skill.orange { 
 
    background: rgba(242, 192, 30, 0.3); 
 
} 
 
.skill.orange p { 
 
    width: 45%; 
 
    background: rgb(242, 192, 30); 
 
} 
 
.skill.orange p:after { 
 
    border-left-color: rgb(242, 192, 3); 
 
} 
 
.skill.light-blue { 
 
    background: rgba(73, 180, 232, 0.3); 
 
} 
 
.skill.light-blue p { 
 
    width: 15%; 
 
    background: rgb(73, 180, 232); 
 
} 
 
.skill.light-blue p:after { 
 
    border-left-color: rgb(73, 180, 232); 
 
} 
 
.skill.dark-blue { 
 
    background: rgba(67, 93, 155, 0.3); 
 
} 
 
.skill.dark-blue p { 
 
    width: 35%; 
 
    background: rgb(67, 93, 155); 
 
} 
 
.skill.dark-blue p:after { 
 
    border-left-color: rgb(67, 93, 155); 
 
} 
 
.skill.red { 
 
    background: rgba(230, 74, 58, 0.3); 
 
} 
 
.skill.red p { 
 
    width: 55%; 
 
    background: rgb(230, 74, 58); 
 
} 
 
.skill.red p:after { 
 
    border-left-color: rgb(230, 74, 58); 
 
} 
 
.skill.purple { 
 
    background: rgba(43, 59, 96, 0.3); 
 
} 
 
.skill.purple p { 
 
    width: 85%; 
 
    background: rgb(43, 59, 96); 
 
} 
 
.skill.purple p:after { 
 
    border-left-color: rgb(43, 59, 96); 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section class="content-section"> 
 
    <div class="row skills"> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill orange arrow-right" data-progress="30"> 
 
     <p> 
 
      <span>Zencart Development big texttttttttttttttttttttttttttt</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill orange" data-progress="30"> 
 
     <p> 
 
      <span>PHP</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill light-blue" data-progress="30"> 
 
     <p> 
 
      <span>HTML5/CSS</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill light-blue" data-progress="30"> 
 
     <p> 
 
      <span>Javascript</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill dark-blue" data-progress="30"> 
 
     <p> 
 
      <span>E-Commerce</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill dark-blue" data-progress="30"> 
 
     <p> 
 
      <span>Content Writing</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill red" data-progress="30"> 
 
     <p> 
 
      <span>Wordpress</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill red" data-progress="30"> 
 
     <p> 
 
      <span>Drupal Development</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill purple" data-progress="30"> 
 
     <p> 
 
      <span>Keyword Optimization</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-xs-12 "> 
 
     <div class="skill purple" data-progress="30"> 
 
     <p> 
 
      <span>Photoshop 6 suit</span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div>

+0

但是這是如何工作的?請解釋。 –

+0

@MohammadAreebSiddiqui檢查在我的代碼上方以粗體顯示的文本!我在'P'內添加了一個'span'標籤,並且在CSS中添加了評論。 –

+0

我在詢問添加span標籤的解釋。爲什麼它不適用於P標籤? –