溢出：隐藏和：在伪选择器

Question

在我开始我的问题之前，我想说我已经看到过类似的问题。他们都说要么将position:relative添加到从:after选择删除position:absolute容器，但他们都没有为我工作。

这是我的fiddle。

当我尝试添加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;时，div右侧的箭头消失或:after选择器消失。我不知道为什么会发生这种情况。

是什么导致了问题，以及如何解决它？谢谢。

Answer 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>