Question

我有一个带动态文字的样式句子。有时文本太长，并将锚点推到盒子外面的末端。我希望文本在span.price-difference之后换行，但是锚点按钮位于p的右侧。

我向:after添加了.price-difference个伪元素。我设置了content: ''和display: block。适用于FF，Chrome，IE（包括IE8，我必须支持），但不适用于Safari。

有一个简单的答案，将.price-difference后面的文字与另一个span包装在一起，并将其设置为block，但更改HTML是一件麻烦事，需要后端开发人员制作更改为JSP文件，我希望避免这种情况。寻找仅限CSS的解决方案（如果存在）。

<p class="upsell"> Upgrade To 
  <span class="stateroom-upgrade"> Concierge Class </span> 
  for an additional 
  <span class="price-difference">$7.14 USD </span> 
  per person per day 
  <a href="" class="ccButtonNew"><span>View Upgrades</span></a>
</p>

CSS

.upsell {
  background: none repeat scroll 0px 0px #FAFAFA;
  border-top: 2px dashed #E8E8E8;
  color: #666;
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  margin: auto 19px 5px;
  padding: 8px 0px 8px 8px;
  position: relative;
  text-transform: none;
  white-space: nowrap;
  width: 560px;
}

.upsell .price-difference {
  color: #0C82C4;
  font-size: 15px;
  font-weight: 700;
  margin-left: 5px;
  display: inline-block;
}

.stateroom .upsell .price-difference::after {
  content: "";
  display: block;
}

.upsell .ccButtonNew {
  position: absolute;
  right: 10px;
  top: 17px;
}

p元素设置了white-space: nowrap，但当我将其关闭时，问题就不会消失。

我认为这与以下链接有关，但我的情况并不相同。在那个问题中，提问者将块级元素div放在p中，它只采用内联元素。我在span中有一个内联元素p。这个应工作。

:after pseudo-element working in FF, but not Safari or Chrome

Answer 1

.stateroom .upsell .price-difference:after {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    border-top: 1px solid #000; /* placeholder border */
}

尝试在after的css规则中添加一个位置。我有一个类似的情况，其中after伪不会在旧版本的safari中显示，但在所有其他浏览器中正常工作。我修复了向css添加位置规则的问题。

希望这一点。

：在伪元素在Safari中不起作用之后

1 个答案: