Question

说我有一个容器div，其中有两个内联元素：

<div>
<span>AAAAAAAAAAAAAAAAAAAA</span><span>BBBBBBBBBBBBBBBBBBBB</span>
</div>

如果有足够的空间，则两个元素将仅占用一行。但是，如果调整了浏览器窗口的大小，第二个可能会碰到新行。

我的问题是，是否有一种方法（使用CSS）设置第二个的样式（如果（且仅）当它碰到第二行时？

Answer 1

这是一个技巧，可让您更改文本颜色。想法是依靠背景颜色，然后用不同的颜色为第二行着色：

.box {
   line-height:1.2em;
   background:
    linear-gradient(to bottom,#000 1.2em,red 0);
   -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  
  /* To illustrate */
  animation:change 2s linear infinite alternate;
  border:1px solid green;
}

@keyframes change {
  from {
    width:100%;
  }
  to {
    width:40%;
  }
}

<div class="box">
<span>AAAAAAAAAAAAAAAAAAAA</span> <span>BBBBBBBBBBBBBBBBBBBB</span>
</div>

这是将边框或背景仅应用于第二行的另一种技巧：

.box {
   line-height:1.2em;
   position:relative;
   z-index:0;
  
  /* To illustrate */
  animation:change 2s linear infinite alternate;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  height:calc(1.2em + 4px);
  left:0;
  right:0;
  background:#fff;
  
}

span {
  display:inline-block;
  position:relative;
  padding:2px;
}
span:before {
  content:"";
  position:absolute;
  z-index:-2;
  top:0;
  bottom:0;
  left:0;
  right:0;
  border:2px solid red;
  background:green;
}



@keyframes change {
  from {
    width:100%;
  }
  to {
    width:40%;
  }
}

<div class="box">
<span>AAAAAAAAAAAAAAAAAAAA</span> <span>BBBBBBBBBBBBBBBBBBBB</span>
</div>

font-size的 hacky 想法，您需要在其中复制文本：

.box {
   line-height:16px;
   position:relative;
   overflow:hidden;
   z-index:0;
  
  /* To illustrate */
  animation:change 2s linear infinite alternate;
}

span {
  padding:2px;
}
span[data-text]:before {
  content:attr(data-text);
}

span[data-text]:after {
  content:attr(data-text);
  position:absolute;
  font-size:23px;
  background:#fff;
  top:17px;
  left:0;
}



@keyframes change {
  from {
    width:100%;
  }
  to {
    width:50%;
  }
}

<div class="box">
<span>AAAAAAAAAAAAAAAAAAAA</span> <span data-text="BBBBBBBBBBBBBBBBBBBB"></span>
</div>

如果子元素位于父元素的第二行，则应用CSS

1 个答案: