Question

在我开始提问之前，我想说明我已经看过类似的问题了。他们都说要将position:relative添加到position:absolute选择器中移除:after的容器中，但它们都不适用于我。

这是我的fiddle。

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

导致问题的原因是什么以及如何解决？感谢。

Answer 1

我不认为，通过CSS可以实现，如果你保持这样的HTML结构，最好对你的HTML进行微小改动

简单地说，在P标记中添加另一个元素并将text-overflow css添加到该元素中，它会解决您的所有问题

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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

1 个答案: