Question

我希望符号 - ＆gt; （文本元素）只出现在第二行。例如，如果文本是一行

John
->

如果有两行文字符号仍然在第二行。

John and 
Tom ->

有可能吗？目前它是如何：

HTML

<div class="inner-box">
     <span class="inner-box-text">Category<i class="icon-font icon-long-arrow"></i></span>
</div>

CSS

.inner-box {
  bottom: 16%;
  left: 10%;
  right: 25%;
  text-align: left;
  position: absolute;
  z-index: 3;
  height: 51px;
}
.inner-box span {
  display: inline-block;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  line-height: 25px;
  max-width: 270px;
  padding-right: 5px;
}
.inner-box i {
  padding-top: 5px;
}

Answer 1

首先应该关闭跨度，如下所示：

<div class="inner-box">
     <span class="inner-box-text">Category<i class="icon-font icon-long-arrow"></i></span>
</div>

您可能正在寻找的是CSS选择器:after

<style>
    .inner-box-text:after { 
        content: " --- whatever should come after";
    }
</style>

可悲的是:after选择器不支持HTML，只支持文本。

另一种可能性是使用jQuery追加一些东西。

亚历

Answer 2

您可以在code

下方使用

<div class="inner-box">
     <span class="inner-box-text">Category</span><i class="icon-font icon-long-arrow"></i>
</div>

以下css

.vip-inner-box {
    bottom: 16%;
    left: 10%;
    right: 25%;
    text-align: left;
    position: absolute;
    z-index: 3;
    height: 51px;
    span {
      display: inline-block;
      text-align: left;
      text-transform: uppercase;
      text-decoration: none;
      font: $font-weight-light 24px $font-custom;
      color: white;
      line-height: 25px;
      max-width: 270px;
      padding-right: 5px;
    }
  }
    i {
      padding-top: 5px;
        display:block; 
    }

CSS - 制作符号永远保持在第二线

2 个答案: